angular-devextreme treeview 学习笔记

项目缠身 学以致用!

Access a Node

访问节点

使用 事件绑定

　　通常来说,你需要在当你需要对其进行操作时访问一个树节点,举个例子,当它被点击或选中时,这个操作引发一个事件,你可以在事件处理函数中访问被操作的节点.

<dx-tree-view
    [dataSource]="data"
    (onItemClick)="onItemClick($event)">
</dx-tree-view>

并不是所有的事件处理函数都提供对节点的访问,只有那些以 'on'开头的处理函数 它们定义在 TreeView Configuration中.

Using a Method

方法的使用

调用 getNodes() 方法 获取应用程序流程中的任意树节点

import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    nodeCollection: Array<any> = [];
    getNodes () {
        this.nodeCollection = this.treeView.instance.getNodes();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

所有节点对象都包含类似的字段集,被描述在节点的文档部分

Search Nodes

搜索节点

在devextreme中树节点是默认被禁用的.将searchEnabled属性设置为true以显示搜索框.searchExpr 属性指定了某个数据字段可以被搜索,如果将几个字段都设置为可搜索则需要将searchExpr定义为一个数组

<dx-tree-view
    [dataSource]="treeViewData"
    dataStructure="plain"
    keyExpr="key"
    displayExpr="name"
    parentIdExpr="parent"
    [searchEnabled]="true"
    [searchExpr]="['count', 'name']">
</dx-tree-view>

当使用者在搜索框输入一个字符串时,树组件将展示所有包含这个字符串的节点.如果使用者想树组件搜索框展示以键入的字符串开头的节点则可设置searchMode为'startwith'.

<dx-tree-view
    [dataSource]="treeViewData"
    dataStructure="plain"
    keyExpr="key"
    displayExpr="name"
    parentIdExpr="parent"
    [searchEnabled]="true"
    searchMode="startswith">
</dx-tree-view>

你也可以通过声明searchEditorOptions属性自定义搜索框.以下的代码将定义搜索栏的宽度和占位符

<dx-tree-view
    [dataSource]="treeViewData"
    dataStructure="plain"
    keyExpr="key"
    displayExpr="name"
    parentIdExpr="parent"
    [searchEnabled]="true">
    <dxo-search-editor-options
        placeholder="Type search value here..."
        [width]="300">
    </dxo-search-editor-options>
</dx-tree-view>

Expand and Collapse Nodes

展开/折叠节点

开始

如果一个节点默认时展开的,设置它的expanded属性为true.这是一个由Default Item Template模式定义的常规字段名.如果需要另一个字段指定节点是否展开或折叠.将它的名称声明到expandedExpr属性中,如下图所示的代码

<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name"
    expandedExpr="isExpanded">
</dx-tree-view>

 

Using API

树组件提供下列API来展开和折叠节点:

·All nodes

你可以使用expandAll()和collapseAll()方法来展开或折叠所有节点.注意expandAll()方法展开的仅是已加载的节点(如果节点是按需加载的)

import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    expandAllNodes () {
        this.treeView.instance.expandAll();
    }
    collapseAllNodes () {
        this.treeView.instance.collapseAll();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

·Individual nodes

各个节点

调用 expandItem(itemElement) 或 collapseItem(itemElement) 方法并传入一个节点的键值作为参数

import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    expandNode (key) {
        this.treeView.instance.expandItem(key);
    }
    collapseNode (key) {
        this.treeView.instance.collapseItem(key);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Event

事件

为了在节点展开与折叠时执行指令,控制itemExpanded或itemCollapsed事件.你可以在配置插件时声明事件处理函数onItemExpanded或onItemCollapse (如果这些方法不会在后续操作中改变)

<dx-tree-view ...
    (onItemExpanded)="onItemExpanded($event)"
    (onItemCollapsed)="onItemCollapsed($event)">
</dx-tree-view>

如果你将在事件执行时改变事件控制器或你需要为单一事件绑定多个控制器,通过on(event Name,eventHandler)方法订阅事件.这是更为典型的Jquery方式

var itemCollapsedEventHandler1 = function (e) {
    // First handler of the "itemCollapsed" event
};
 
var itemCollapsedEventHandler2 = function (e) {
    // Second handler of the "itemCollapsed" event
};
 
$("#treeViewContainer").dxTreeView("instance")
    .on("itemCollapsed", itemCollapsedEventHandler1)
    .on("itemCollapsed", itemCollapsedEventHandler2);

Select Nodes

选取节点

开始

如果一个节点开始就被默认点击.设置selected为true.这是一个由Default Item Template模式定义的常规字段名,如果需要另一个字段指定节点是否展开或折叠,将它的名称声明到selectedExpr属性中,如下所示

<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name"
    selectedExpr="isSelected"
    showCheckBoxesMode="normal">
</dx-tree-view>

Using API

使用API 

为了通过程序控制选取和取消选取节点,调用 selectItem(itemElement) 或 unselectItem(itemElement)方法传一个节点键值作为参数

import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    selectNode (key) {
        this.treeView.instance.selectItem(key);
    }
    unselectNode (key) {
        this.treeView.instance.unselectItem(key);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

为了通过程序控制选取和取消选取节点,调用selectAll() 或 unselectAll() 方法.

注意

如果 showCheckBoxesMode 的值是'none',使用该API选择的节点与外观上未选择的节点没有区别

User Interation

用户交互

如果单次仅有一个节点处于选择状态,设置 selectByClick 为 true .这样, 终端用户何以点击节点以选择它

<dx-tree-view ...
    [selectByClick]="true">
</dx-tree-view>

如需设置同时可点击多个节点.设置 showCheckBoxesMode 为 'normal'. 这将为这些节点增加选择框,你也可以设置 showCheckBoxesMode 为 'selectAll' 从而允许用户选择全部节点.

<dx-tree-view ...
    showCheckBoxesMode="normal"> <!-- or "selectAll" -->
</dx-tree-view>

Events

事件

树组件调用了以下与选取相关的事件

itemSelectionChanged

在节点选取状态改变后调用

selectAllValueChanged

在全选了之后调用

你可以通过函数来控制这些事件. 当你配置插件时为onItemSelectionChanged 和 onSelectAllValueChanged属性赋值控制函数(如果在运行时它们保持不变的情况下)

<dx-tree-view ...
    (onItemSelectionChanged)="onItemSelectionChanged($event)"
    (onSelectAllValueChanged)="onSelectAllValueChanged($event)>
</dx-tree-view>

如果你需要在运行时改变事件或需要为事件绑定多个控制器,使用on（eventName，eventHandler）方法订阅它.这是更为典型的Jquery方式

var itemSelectionChangedHandler1 = function (e) {
    // First handler of the "itemSelectionChanged" event
};
 
var itemSelectionChangedHandler2 = function (e) {
    // Second handler of the "itemSelectionChanged" event
};
 
$("#treeViewContainer").dxTreeView("instance")
    .on("itemSelectionChanged", itemSelectionChangedHandler1)
    .on("itemSelectionChanged", itemSelectionChangedHandler2);