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-optionsplaceholder="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);

转载于:https://www.cnblogs.com/k2etrookie/p/9700918.html

angular-devextreme treeview 学习笔记相关推荐

Angular官网学习笔记
Angular官网学习笔记一.Angular概述 **什么是Angular:**一个基于TypeScript构建的开发平台包括: 一个基于组件的框架,用于构建可伸缩的Web应用一组完美集成的库,涵 ...
Angular 依赖注入学习笔记之工厂函数的用法
网址:https://angular.institute/di We can transfer any data through our apps, transform it and replace ...
Angular input decorator学习笔记
https://angular.io/api/core/Input Input decorator只能用在Angular class字段里, 用于指定元数据,将class字段指定成input prop ...
Angular ngOnChanges hook学习笔记
只有这三种事件才会导致Angular视图的更新,都是异步事件. Events:如 click, change, input, submit 等用户事件 XMLHttpRequests:比如从远端服务获 ...
Angular数据绑定的学习笔记
https://angular.io/guide/property-binding Property binding in Angular helps you set values for prope ...
2020国庆节 Angular structual 指令学习笔记(＜ng-template＞) 包含语法糖解糖过程
Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, ty ...
angular基本知识学习笔记 - Component的基本概念
官网地址:https://angular.io/guide/architecture Angular is a platform and framework for building single-p ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
css view a if属性,uni-app学习笔记（2）view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...
Angular 服务器端渲染的学习笔记(二)
官网地址:https://angular.io/guide/universal I have mainly used angular universal for SEO purposes. In th ...

angular-devextreme treeview 学习笔记

angular-devextreme treeview 学习笔记相关推荐

最新文章

热门文章