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