项目缠身 学以致用!
Access a Node
访问节点
使用 事件绑定
通常来说,你需要在当你需要对其进行操作时访问一个树节点,举个例子,当它被点击或选中时,这个操作引发一个事件,你可以在事件处理函数中访问被操作的节点.
并不是所有的事件处理函数都提供对节点的访问,只有那些以 'on'开头的处理函数 它们定义在 中.
Using a Method
方法的使用
调用 getNodes() 方法 获取应用程序流程中的任意树节点
import { ..., ViewChild } from "@angular/core";import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";// ...export class AppComponent { @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent; nodeCollection: Array = []; getNodes () { this.nodeCollection = this.treeView.instance.getNodes(); }}@NgModule({ imports: [ // ... DxTreeViewModule ], // ...}) 所有节点对象都包含类似的字段集,被描述在的文档部分
Search Nodes
搜索节点
在devextreme中树节点是默认被禁用的.将searchEnabled属性设置为true以显示搜索框.searchExpr 属性指定了某个数据字段可以被搜索,如果将几个字段都设置为可搜索则需要将searchExpr定义为一个数组
当使用者在搜索框输入一个字符串时,树组件将展示所有包含这个字符串的节点.如果使用者想树组件搜索框展示以键入的字符串开头的节点则可设置为'startwith'.
你也可以通过声明searchEditorOptions属性自定义搜索框.以下的代码将定义搜索栏的宽度和占位符
Expand and Collapse Nodes
展开/折叠节点
开始
如果一个节点默认时展开的,设置它的expanded属性为true.这是一个由模式定义的常规字段名.如果需要另一个字段指定节点是否展开或折叠.将它的名称声明到expandedExpr属性中,如下图所示的代码
Using API
树组件提供下列API来展开和折叠节点:
·All nodes
你可以使用和方法来展开或折叠所有节点.注意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
事件
为了在节点展开与折叠时执行指令,控制或事件.你可以在配置插件时声明事件处理函数或(如果这些方法不会在后续操作中改变)
如果你将在事件执行时改变事件控制器或你需要为单一事件绑定多个控制器,通过方法订阅事件.这是更为典型的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.这是一个由模式定义的常规字段名,如果需要另一个字段指定节点是否展开或折叠,将它的名称声明到属性中,如下所示
Using API
使用API
为了通过程序控制选取和取消选取节点,调用 或 方法传一个节点键值作为参数
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 ], // ...}) 为了通过程序控制选取和取消选取节点,调用 或 方法.
注意
如果 的值是'none',使用该API选择的节点与外观上未选择的节点没有区别
User Interation
用户交互
如果单次仅有一个节点处于选择状态,设置 selectByClick 为 true .这样, 终端用户何以点击节点以选择它
如需设置同时可点击多个节点.设置 showCheckBoxesMode 为 'normal'. 这将为这些节点增加选择框,你也可以设置 showCheckBoxesMode 为 'selectAll' 从而允许用户选择全部节点.
Events
事件
树组件调用了以下与选取相关的事件
itemSelectionChanged
在节点选取状态改变后调用
selectAllValueChanged
在全选了之后调用
你可以通过函数来控制这些事件. 当你配置插件时为onItemSelectionChanged 和 onSelectAllValueChanged属性赋值控制函数(如果在运行时它们保持不变的情况下)
如果你需要在运行时改变事件或需要为事件绑定多个控制器,使用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);