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