AngularJS-tree教程

一时失言乱红尘 2022-06-11 09:47 196阅读 0赞

# AngularJS-tree教程 #

## 简介 ##

AngularJS-tree是AngularJS官方出品的tree控件，它与AngularJS无缝组合、且方便实用。AngularJS-tree的github官方地址是[https://github.com/wix/angular-tree-control][https_github.com_wix_angular-tree-control]。英文好的可以直接看，这篇教程是针对官方API进行整理翻译而来。

下面是完成tree的学习必须要知道的步骤。

![Center][]

## 下载、配置环境 ##

#### 导入资源文件 ####

下载AngularJS-tree的代码，下载地址：[https://github.com/wix/angular-tree-control][https_github.com_wix_angular-tree-control]。导入下面三个资源文件。

当然，还要导入Angular.js

#### 添加依赖模块 ####

在JS中添加它的依赖模块

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

## 简单实现 ##

#### Html标签 ####

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

<treecontrol class="tree-classic"
      tree-model="dataForTheTree"
      options="treeOptions"
      on-selection="showSelected(node)"
      selected-node="node1">
      employee: {
       {node.name}} age {
       {node.age}}
    </treecontrol>
    
    <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": [] }
    ];

#### 效果 ####

![Center 1][]

## 属性配置讲解 ##

### 加载数据 ###

#### 属性 ####

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=如上

#### 效果 ####

![Center 2][]

### 多选配置 ###

#### 属性 ####

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
    }

效果

![Center 3][]

### 其他属性配置 ###

#### 属性 ####

##### 选择事件 #####

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

![Center 4][]

##### 过滤器 #####

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;

![Center 5][]

#### 配置 ####

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

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

injectClasses：给node注入额外的css

[https_github.com_wix_angular-tree-control]: https://github.com/wix/angular-tree-control
[Center]: /images/20220611/152f77460e1f4d07a5d2f1aaf8296032.png
[Center 1]: /images/20220611/9fbe7f675ae748f6980519cef43a9985.png
[Center 2]: /images/20220611/50e843692bd248108f600d49e8cddaf4.png
[Center 3]: /images/20220611/7698f5101a1d4d029e72f51197b67e52.png
[Center 4]: /images/20220611/158cbbb1b0b24bf5ab7062f1767addbd.png
[Center 5]: /images/20220611/1ccbff0756594e89970cbf2745c0da65.png