AngularJS-tree教程
AngularJS-tree教程
简介
AngularJS-tree是AngularJS官方出品的tree控件，它与AngularJS无缝组合、且方便实用。AngularJS-tree的github官方地址是https://github.com/wix/angular-tree-control。英文好的可以直接看，这篇教程是针对官方API进行整理翻译而来。
下面是完成tree的学习必须要知道的步骤。
下载、配置环境
导入资源文件
下载AngularJS-tree的代码，下载地址：https://github.com/wix/angular-tree-control。导入下面三个资源文件。
<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.js
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>添加依赖模块
在JS中添加它的依赖模块
angular.module('myApp', ['treeControl']);
简单实现
Html标签
可以用过添加<treecontrol>标签或着在<div>中加上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>JS
$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": [] }
];效果
属性配置讲解
加载数据
属性
tree-model：树数据的对象，格式: [Node|Array[Node]]，对象范围在'$scope'的范围内。范围可以是一个node数组或一个node对象。
options：树的配置
options的配置
nodeChildren：每个孩子节点的属性名，默认是” children”。
如数据：[{
"name": "Joe",
"age": "21",
"list": [{ "name": "Smith","age": "42", "children": [] }]
}]，其nodeChildren的值就是”list”。
dirSelectable：目录是否可被选中，默认“true”。为“true”，点击目录名为选择，点击目录图标才为展开；为“false”时，点击目录就是展开。
综合代码
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions1" >
employee: {{node.name}} age {{node.age}}
</treecontrol>$scope.treeOptions1 = {
nodeChildren: "children",
dirSelectable:false
}
$scope.dataForTheTree=如上效果
多选配置
属性
selected-node：[Node]，当multiSelection=false，绑定tree中单选node。
selected-nodes：[Array[Node]]，当multiSelection=true，绑定tree中多选nodes。
options的配置
multiSelection：[Boolean]，是否多选，默认”false”
综合代码
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions1"
selected-nodes="nodes">
employee: {{node.name}} age {{node.age}}
</treecontrol>
</br>
<!-- 动态显示多选选择项 -->选中：{{nodes}}$scope.treeOptions1 = {
nodeChildren: "children",
dirSelectable:false,
multiSelection:true
}效果
其他属性配置
属性
选择事件
on-selection：(node, selected)，选择node触发事件，例‘on-selection="showSelected(node)"‘。
排序
order-by：value，根据value排序
reverse-order：boolean，true：倒排序；false：正排序。
例子：
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions1"
selected-nodes="nodes" order-by="order" reverse-order="false">
employee: {{node.name}} age {{node.age}}
</treecontrol>$scope.order="age";
过滤器
filter-expression：过滤器公式
filter-comparator：是否完全匹配(大小写)
过滤表达式(filter-expression)用于选择的节点从树中显示。它可以是一个字符串，对象或函数。如果一个字符串，它是用来匹配的节点属性值。如果一个对象，每个属性的表达对象是用来匹配的节点属性名称相同的值。一个函数可以用来写任意的滤波器，并将树的每个节点调用。
过滤器的比较器，如果预期值用于确定（从筛选器表达式）和实际值（从数组中的对象）应被视为一个匹配。如果为false，它寻找子串匹配在不区分大小写的方式（默认）。如果是真的，它看起来完全匹配。如果一个函数，函数将给定的目标值，并比较谓词值和应该如果项目应包括在过滤结果返回true。
例子：
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions1" selected-nodes="nodes" order-by="order" reverse-order="false"
filter-expression="predicate" filter-comparator="comparator">
employee: {{node.name}} age {{node.age}}
</treecontrol>$scope.predicate = "Smith";
$scope.comparator = false;
配置
allowDeselect：node是否可以取消选中，默认“true”
isLeaf：function (node)->boolean, 用于确定某个节点是叶或枝。为确定叶或分支节点的孩子存在默认功能检查。
injectClasses：给node注入额外的css
腾讯云开发者
