AngularJS基于树的控制组件

AngularJS基于树的控制组件

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

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

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

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

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

将树元素添加到您的模板

<!--asaDomelement-->
<treecontrolclass="tree-classic"
tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee:{{node.name}}age{{node.age}}
</treecontrol>
<!--asanattribute-->
<divtreecontrolclass="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","children":[
{"name":"Jenifer","age":"23","children":[
{"name":"Dani","age":"32",{"name":"Max","age":"34","children":[]}
]}
]}
]},{"name":"Albert","age":"33",{"name":"Ron","age":"29","children":[]}
];

样式

树控件呈现以下的DOM结构

<treecontrolclass="tree-classic">
<ul>
<liclass="tree-expanded">
<iclass="tree-branch-head"></i>
<iclass="tree-leaf-head"></i>
<divclass="tree-label">
...label-expandedangulartemplateisinthetreecontrolelement...
</div>
<treeitem>
<ul>
<liclass="tree-leaf">
<iclass="tree-branch-head"></i>
<iclass="tree-leaf-head"></i>
<divclass="tree-labeltree-selected">
...label-expandedangulartemplateisinthetreecontrolelement...
</div>
</li>
<liclass="tree-leaf">
<iclass="tree-branch-head"></i>
<iclass="tree-leaf-head"></i>
<divclass="tree-label">
...label-expandedangulartemplateisinthetreecontrolelement...
</div>
</li>
</ul>
</treeitem>
</li>
</ul>
</treecontrol>

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

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

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

树选择放置于标签div