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。导入下面三个资源文件。

代码语言：javascript复制

<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

代码语言：javascript复制

<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

添加依赖模块

在JS中添加它的依赖模块

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

简单实现

Html标签

可以用过添加<treecontrol>标签或着在<div>中加上treecontrol属性来使用

代码语言：javascript复制

<!-- 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

代码语言：javascript复制

$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”时，点击目录就是展开。

综合代码

代码语言：javascript复制

<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions1" >
   employee: {{node.name}} age {{node.age}}
</treecontrol>

代码语言：javascript复制

$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”

综合代码

代码语言：javascript复制

<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions1"
selected-nodes="nodes">
   employee: {{node.name}} age {{node.age}}
</treecontrol>
</br>
<!-- 动态显示多选选择项 -->选中：{{nodes}}

代码语言：javascript复制

$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：正排序。

例子：

代码语言：javascript复制

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

代码语言：javascript复制

$scope.order="age";

过滤器

filter-expression：过滤器公式

filter-comparator：是否完全匹配(大小写)

过滤表达式(filter-expression)用于选择的节点从树中显示。它可以是一个字符串，对象或函数。如果一个字符串，它是用来匹配的节点属性值。如果一个对象，每个属性的表达对象是用来匹配的节点属性名称相同的值。一个函数可以用来写任意的滤波器，并将树的每个节点调用。

过滤器的比较器，如果预期值用于确定（从筛选器表达式）和实际值（从数组中的对象）应被视为一个匹配。如果为false，它寻找子串匹配在不区分大小写的方式（默认）。如果是真的，它看起来完全匹配。如果一个函数，函数将给定的目标值，并比较谓词值和应该如果项目应包括在过滤结果返回true。

例子：

代码语言：javascript复制

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

代码语言：javascript复制

$scope.predicate = "Smith";
$scope.comparator = false;

配置

allowDeselect：node是否可以取消选中，默认“true”

isLeaf：function (node)->boolean, 用于确定某个节点是叶或枝。为确定叶或分支节点的孩子存在默认功能检查。

injectClasses：给node注入额外的css

node.js github git 开源 angularjs

0 人点赞