angular-ui-tree使用简介

今天为大家介绍下angular-ui-tree的使用方法，它是一个不依赖于jquery 的angualrJS UI,友好的外观，方便的操作，是它最大的优势。

angular-ui-tree有如下特点：

1.使用本地AngularJS范围数据绑定

2.整个树都可以进行排序和移动项目

3.防止上级节点创建子节点

废话不多说，下面上效果图

拖拽效果：

节点的添加

官方DEMO：http://angular-ui-tree.github.io/angular-ui-tree/

angular-ui-tree 下载地址： https://github.com/angular-ui-tree/angular-ui-tree

前端使用代码如下：

index.js 

1、  载入angular-ui-tree.css 和 angular-ui-tree.js

2、module中加入依赖

使用页面中的代码

html

上段代码中 dept 参数决定了树的深度，决定了树到第几级不在继续创建子节点，我们可以自行配 。

在标签上加入data-nodrag表示此功能不受拖动的影响 ，保证了次功能能够正确使用，不被拖动效果所覆盖，如input的聚焦效果 。

ui-tree-handle为节点拖动的指令，自由的使用或删除它我们可以限制某些特定节点禁止拖动

前端用ng-include 这种形式 模拟后端生成树

js

    $scope.init=function(){
            $scope.getTreeList();
        }
    
        $scope.getTreeList=function(){ 
            OrganizationService.getOrgTreeList().then(function(result) {
                $scope.angularTreeList=[];
                //查询树
                $scope.orgTypeList=result;  
                //创建根节点
                var root={};
                root.name="法制机构";
                root.level=0;
                root.sequence=1;
                root.orgTypeId=-1;
                root.children=$scope.orgTypeList;
                $scope.angularTreeList.push(root);
                $scope.treeOptions.data=$scope.angularTreeList;
            });
        }
        
        //新建节点
        $scope.newSubItem = function (item) {
            var name=window.prompt("请输入节点的名称");
            if(name==""||name==undefined){
                return;
            }
            if(item.orgTypeId==undefined){
                item.orgTypeId=-1;
            }
            var json={"level":parseInt(item.level)+1,"name":name,"parentTypeId":item.orgTypeId,"children":[]};
            if(item.children==null||item.children.length==0){
                item.children=[];
                json.sequence=1;
            }else{
                var maxSequence=parseInt(item.children[item.children.length-1].sequence);
                json.sequence=maxSequence+1;
            }
            OrganizationService.saveOrgType(json).then(function(result) {
//                item.children.push(json);
                $scope.init();
            });           
        };
        
        //编辑节点
        $scope.editItem=function(item){
//            var target=$("#div_"+item.orgTypeId);
            if(item.isEdit==undefined||item.isEdit==false){
                item.isEdit=true;  
//                $(target).removeAttr("ui-tree-handle");     
            }else if(item.isEdit==true){
                item.isEdit=false;  
//                $(target).attr("ui-tree-handle",'');
                var json={"orgTypeId":item.orgTypeId,"name":item.name}
                OrganizationService.updateOrgType(json).then(function(result) {
//                  $scope.init();
                });
            }
        }
        
        //删除节点
        $scope.removeItem=function(item){
          var json={};
          json.orgTypeId=item.orgTypeId;
          json.status=0;
          OrganizationService.updateOrgType(json).then(function(result) {
//            $scope.init();
          });
        }
        
        $scope.treeOptions = {
            //拖拽操作 拖拽后会返回callback beforeDrop函数，我们可以重写这个函数，拖拽本质上是顺序的改变和层级的改变，所以是一个update操作
            beforeDrop : function (e) {
               var source = e.source.nodeScope.item;
               var destRoot = e.dest.nodesScope.item ;
               if(destRoot==undefined){
                   return $q.reject();
               }
               var destIndex=e.dest.index;
               var dest=e.dest.nodesScope.item.children[destIndex];
               if(dest==undefined){
                   return $q.reject();
               }
               if (source.parentTypeId!=dest.parentTypeId) {       
                   return $q.reject();
               }
               var sourceSeq=source.sequence;
               var destSeq=dest.sequence;
               source.sequence=destSeq;
               dest.sequence=sourceSeq;
               OrganizationService.updateOrgType(source).then(function(result) {

               });
               OrganizationService.updateOrgType(dest).then(function(result) {
        
               });
               return;
            }
       };

注：treeOptions中还有removed,dropped等回调方法，这里没有讲述,具体请看angular-ui-tree.js 源码

       本例中的拖拽操作默认为只能同级节点之间拖拽才能生效，不是同级自动取消，当然，不是同级完全自由的也可以实现，在使用的过程中，请根据自身业务需求及数据结构自行规定拖动的规则，angular-ui-tree默认的规则是全部可以自由拖动的

最后是后端实体的结构

public class OrganizationType extends BaseEntity {
    //组织类型id
    private String orgTypeId;
    //code
    private String code;
    //排序
    private String sequence;
    //层级
    private String level;
    //类型名称
    private String name;
    //父类型id
    private String parentTypeId;
    
    private List children;
    
    
    public List getChildren() {
        return children;
    }
    public void setChildren(List children) {
        this.children = children;
    }
    public String getOrgTypeId() {
        return orgTypeId;
    }
    public void setOrgTypeId(String orgTypeId) {
        this.orgTypeId = orgTypeId;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    
    public String getParentTypeId() {
        return parentTypeId;
    }
    public void setParentTypeId(String parentTypeId) {
        this.parentTypeId = parentTypeId;
    }

    public String getSequence() {
        return sequence;
    }
    public void setSequence(String sequence) {
        this.sequence = sequence;
    }
    public String getLevel() {
        return level;
    }
    public void setLevel(String level) {
        this.level = level;
    }
    
    public String toString() {
        return "OrganizationType [orgTypeId=" + orgTypeId + ", code=" + code + ", sequence=" + sequence + ", level="
               + level + ", name=" + name + ", parentTypeId=" + parentTypeId + ", children=" + children + "]";
    }
       
}

查询树

@RequestMapping("/getOrgTreeList.do")
    @ResponseBody
    public List getOrgTreeList(){
        List orgTypeList= new ArrayList();
        OrganizationType orgType=new OrganizationType();
        orgType.setParentTypeId("-1"); 
        orgTypeList=orgTypeService.findOrgTypeList(orgType);  //把根查出来
        fillTree(orgTypeList);
        return orgTypeList;
    }
    
    public void fillTree(List orgTypeList){
        if(orgTypeList!=null){
            for(OrganizationType orgType : orgTypeList){
                OrganizationType type=new OrganizationType();
                type.setParentTypeId(orgType.getOrgTypeId());
                List orgChildList=orgTypeService.findOrgTypeList(type);
                orgType.setChildren(orgChildList);
                fillTree(orgChildList);
            }
        }
    }