B/S端界面控件DevExtreme中文使用指南——集成第三方框架API

本文将为大家介绍在使用DevExtreme组件时如何集成第三方框架的API，欢迎下载最新版体验~

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

开发人员可以将

DevExpress技术交流群7：674691612      欢迎一起进群讨论

创建并配置一个UI组件

要创建一个UI组件、调用它的构造函数、传递目标元素和配置对象，开发人员可能需要为目标元素设置额外的属性（例如，数据可视化UI组件的显示属性应该设置为“block”）。

import Accordion from "devextreme/ui/accordion";...let container = document.getElementById("root");let element = document.createElement("div");container.appendChild(element);let instance = new Accordion(element, options);...

如果不使用模块，可以使用DevExpress.ui命名空间来访问大多数UI组件的构造函数，例外的是数据可视化组件：VectorMap、RangeSelector和所有类型的图表和仪表，这些组件属于DevExpress.viz命名空间。

let instance = new DevExpress.ui.dxAccordion(element, options);let dataVizInstance = new DevExpress.viz.dxPolarChart(element, options);

更改组件属性并处理事件

调用方法和订阅事件需要特定的UI组件实例，调用UI组件类的静态getInstance(element)方法来检索现有的UI组件实例。

// Modular approachimport Accordion from "devextreme/ui/accordion";...let element = document.getElementById("myAccordion");let instance = Accordion.getInstance(element) as Accordion;// Non-modular approach:let element = document.getElementById("myAccordion");let instance = DevExpress.ui.dxAccordion.getInstance(element);

开发人员可以在运行时使用option()方法获取和设置UI组件属性。

// Get a property valuelet isVisible = instance.option("visible");// Set a property valueinstance.option("visible", false);

要订阅事件，可以使用名称以”on” 开头的属性（例如，”onItemClick”）。

或者，您可以使用”on()”方法。

高级配置

指定UI组件的integrationOptions属性来提供双向绑定和模板支持。

DevExpress.ui.dxAccordion(element, {...integrationOptions: {watchMethod: ...templates: ...createTemplate: ...}})

integrationOptions配置对象包含以下字段：

• watchMethod：

该字段接受以下函数：

function(expressionGetter, callback, watchOptions)Where

• expressionGetter – watched.Accepts表达式接受一个函数或字符串。
• callback – 在第一次设置watcher时调用回调，每次它检测到在内部求值循环中expressionGetter的值被更改时都调用回调。
• watchOptions – 包含两个布尔字段的对象：
  • skipImmediate – 指定是否跳过第一个值比较。
  • deep – 指定观察程序使用深度比较还是浅比较。
  • 该方法应该返回一个函数，当删除与UI组件相关的监视器时调用该函数。
• 模板（templates）

这个字段保存了UI组件初始化时添加的模板映射，项目键应该与模板名称相对应，项目值应该是包含呈现函数的对象。

templates: {itemTemplate: {render: function (renderData){// 'renderData' includes the following fields:// 'model' - data to be applied on markup// 'itemIndex' - index of item in collection (or id in hierarchical collections)// 'container' - append rendered markup to this element...}}}

render函数应该返回一个包含渲染模板的HTML元素。

• createTemplate

处理自定义模板的函数，它接受HTML标记或传递给UI组件的DOM节点。模板属性，并返回带有呈现函数的对象。

createTemplate: function(source) {var template = Hogan.compile(source);return {render: function(args) {return template.render(args.data);}};}

在某些情况下，模板会在运行时删除，例如当项目更新时，要删除分配给已删除模板的资源，请处理dxremove事件。

integrationOptions: {templates: {"item": {render: function(args) {var div = document.createElement("div");new Button(div ,{text: args.model});var intervalId = setInterval(function() {console.log(args.model);}, 500);DevExpress.events.on(div, "dxremove", function() {clearInterval(intervalId);});args.container.appendChild(div);return div;}}}}

移除UI组件

使用UI组件的dispose()方法来处理分配给它的资源。

let element = document.createElement("div");let instance = new Accordion(element, options);...instance.dispose();

注意：在dispose方法调用之后，与UI组件关联的HTML元素保留在DOM中。如果还需要删除元素，则使用本地API调用。

element.remove();

更多DevExpress线上公开课、中文教程资讯请上中文网获取

来源：慧都