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 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 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);
             }
         }
     }

原文地址：http://blog.csdn.net/pkpk20044/article/details/51982232