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

<script type="text/ng-template" id="angularTreeTemplate">    <div ui-tree-handle class="tree-node tree-node-content angular-ui-tree-handle">    <a class="btn btn-success btn-xs" ng-if="item.children && item.children.length > 0" data-nodrag ng-click="toggle(this)">     <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>    </a>     <span ng-show="item.isEdit">     <input style="width:40%" type="text" data-nodrag ng-model="item.name" />     </span>     <span ng-show="!item.isEdit">      {{ item.name | limitTo: 5 }}{{item.name.length > 5 ? '...' : ''}}     </span>   <a ng-hide="item.children.length>0||item.level==0" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeItem(item)||remove(this)">   <span class="glyphicon glyphicon-remove"></span>   </a>    <a ng-show="item.level<dept" class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(item)">    <span class="glyphicon glyphicon-plus"></span>   </a>   <a ng-show="item.level>0" class="pull-right btn btn-warning btn-xs" data-nodrag ng-click="editItem(item)">    <span class="glyphicon glyphicon-edit"></span>   </a>   <a ng-show="dept==1||item.level>1" class="pull-right btn btn-info btn-xs" data-nodrag ng-click="selectTreeItem(item)">    <span class="glyphicon glyphicon-search"></span>   </a></div>  <ol ui-tree-nodes="" style="padding-left:10px;" ng-model="item.children" ng-class="{hidden: collapsed}">    <li ng-repeat="item in item.children" ui-tree-node ng-include="'angularTreeTemplate'">    </li>  </ol></script><div ui-tree="treeOptions" id="tree-root">      <ol ui-tree-nodes ng-model="angularTreeList">        <li ng-repeat="item in angularTreeList" ui-tree-node ng-include="readonly?'angularTreeReadOnlyTemplate':'angularTreeTemplate'">        </li>      </ol>    </div> 

上段代码中 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<OrganizationType> children;            public List<OrganizationType> getChildren() {        return children;    }    public void setChildren(List<OrganizationType> 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<OrganizationType> getOrgTreeList(){        List<OrganizationType> orgTypeList= new ArrayList<OrganizationType>();        OrganizationType orgType=new OrganizationType();        orgType.setParentTypeId("-1");         orgTypeList=orgTypeService.findOrgTypeList(orgType);  //把根查出来        fillTree(orgTypeList);        return orgTypeList;    }        public void fillTree(List<OrganizationType> orgTypeList){        if(orgTypeList!=null){            for(OrganizationType orgType : orgTypeList){                OrganizationType type=new OrganizationType();                type.setParentTypeId(orgType.getOrgTypeId());                List<OrganizationType> orgChildList=orgTypeService.findOrgTypeList(type);                orgType.setChildren(orgChildList);                fillTree(orgChildList);            }        }    }