angular-ui-tree的使用总结

关于angular-ui-tree插件的介绍这里不做解释，大家可以百度。这里只是介绍angular-ui-tree的使用。(js代码直接参照官网给的，本文不再解释)
废话不多说，直接上demo

<div ng-controller="common.views.appointRegion.appointRegionTree as vm">    <!-- Nested node template -->    <script type="text/ng-template" id="nodes_renderer.html">        <div>            <div ui-tree-handle class="tree-node tree-node-content">                <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">                    <span class="glyphicon"                          ng-class="{          'glyphicon-chevron-right': collapsed,          'glyphicon-chevron-down': !collapsed        }"></span>                </a>                {{node.name}}                <a ng-if="node.levelIndex!=0" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeItem(this)">                    <span class="glyphicon glyphicon-remove"></span>                </a>                <a ng-if="node.levelIndex!=2" class="pull-right btn btn-warning btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">                    <span class="glyphicon glyphicon-plus"></span>                </a>                <a  class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="edit(this)" style="margin-right: 8px;">                    <span class="glyphicon glyphicon-edit"></span>                </a>            </div>            <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">                <li ng-repeat="node in node.nodes" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'" ng-show="visible(node)">                </li>            </ol>        </div>    </script>  <div ui-tree data-drag-enabled="false" data-max-depth="2" id="tree-root">                <ol ui-tree-nodes ng-model="data">                    <li ng-repeat="node in data"  ui-tree-node  data-collapsed="true" ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li>                </ol>            </div>

1、

type="text/ng-template"

        如果你是一个angular的开发者的话，对于ng-html2js你应该 很熟悉。对于angular的指令，我们经常需要定义模板( directive template/templateUrl),你可以选择讲html page 放在真正的的web容器中寄宿，也可以选择angular的ng-template 放在view的page之上，抑或也可以讲html打成一个js文件和directive 的js文件合并在一起发布。（个人觉得这句话写的很好）

2、

data-drag-enabled="false"

禁止拖拽 ，默认为true

3、

data-max-depth="2"

遍历的深度，当前深度为2

4、

data-collapsed="true"

当前状态为折叠，即不展开

后台参考代码c#，使用无限极遍历。

     var listnode=FindOrgTypeList(node);            FillTree(listnode);            return listnode;        }        private void FillTree(List<Node> orgTypeList)        {            if (orgTypeList != null)            {                foreach (Node orgType in orgTypeList)                {                    Node node = new Node();                    node.Id = orgType.Id;                    List<Node> orgChildList =FindOrgTypeList(node);                    orgType.nodes.AddRange(orgChildList);                    FillTree(orgChildList);                }            }        }        private List<Node> FindOrgTypeList(Node node)        {              var nodelist=  _appointRegionRepository.GetAll()                .WhereIf(!node.Id.ToString().IsNullOrWhiteSpace(), m => m.ParentId == node.Id)                .WhereIf(node.LevelIndex!=null,m=>m.LevelIndex==node.LevelIndex)                .ToList()                .MapTo<List<Node>>();                return nodelist;                  }