AngularJS基于树的控制组件

所属分类：导航-文件树

95333 325 查看评论 (27)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：Angular JS Tree基于树的控制组件

AngularJS基于树的控制组件

树控件可以作为一个DOM元素或属性。

复制脚本和CSS为你的项目添加一个脚本和链接到你的页面。

<script type="text/javascript" src="/angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">

添加一个依赖于您的应用程序模块

angular.module('myApp', ['treeControl']);

将树元素添加到您的模板

<!-- as a Dom element -->
<treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</treecontrol>
<!-- as an attribute -->
<div treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</div>

并为树添加数据

$scope.treeOptions = {
    nodeChildren: "children",
    dirSelectable: true,
    injectClasses: {
        ul: "a1",
        li: "a2",
        liSelected: "a7",
        iExpanded: "a3",
        iCollapsed: "a4",
        iLeaf: "a5",
        label: "a6",
        labelSelected: "a8"
    }
}
$scope.dataForTheTree =
[
    { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
            { "name" : "Jenifer", "age" : "23", "children" : [
                { "name" : "Dani", "age" : "32", "children" : [] },
                { "name" : "Max", "age" : "34", "children" : [] }
            ]}
        ]}
    ]},
    { "name" : "Albert", "age" : "33", "children" : [] },
    { "name" : "Ron", "age" : "29", "children" : [] }
];

样式

树控件呈现以下的DOM结构

<treecontrol class="tree-classic">
  <ul>
    <li class="tree-expanded">
      <i class="tree-branch-head"></i>
      <i class="tree-leaf-head"></i>
      <div class="tree-label">
         ... label - expanded angular template is in the treecontrol element ...
      </div>
      <treeitem>
        <ul>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label tree-selected">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
        </ul>
      </treeitem>
    </li>
  </ul>
</treecontrol>

CSS类用于内置样式的树控件。附加的类可以使用options.injectclasses成员加入（见上文）

树扩展，树倒塌，树叶放在“UL”元素

树枝头，树的叶头-被放置在'i'元素。我们使用这些类来放置树的图标

树选择放置于标签div

jq焦点旋转轮播图

jQuery鼠标悬停导航底部动画效果