DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

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

来源:   发布时间:2023-01-29   浏览:613次

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

开发人员可以将DevExtreme UI组件与其他框架一起使用,而不仅仅是那些开箱即用的框架(Angular、React、Vue等),本文介绍如何使用DevExtreme UI组件,并在使用第三方框架时配置它们以支持模板和双向绑定。

注意:本文中的所有示例都演示了如何在没有集成jQuery的情况下使用DevExtreme UI组件,如果没有链接jQuery库或在DevExtreme脚本之后链接jQuery,则禁用该组件。

DevExtreme v22.2正式版下载

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组件的构造函数,例外的是数据可视化组件:VectorMapRangeSelector和所有类型的图表和仪表,这些组件属于DevExpress.viz命名空间。

let instance = new DevExpress.ui.dxAccordion(element, options);
let dataVizInstance = new DevExpress.viz.dxPolarChart(element, options);
更改组件属性并处理事件

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

// Modular approach
import 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 value
let isVisible = instance.option("visible");

// Set a property value
instance.option("visible", false);

要订阅事件,可以使用名称以"on" 开头的属性(例如,"onItemClick")。

Accordion(element, {
...,
onItemClick: function(e){
alert("An item is clicked!");
}
})

或者,您可以使用"on()"方法。

instance.on("itemClick", function(e){
alert("An item is clicked!");
})
高级配置

指定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线上公开课、中文教程资讯请上中文网获取

DevExpress v22.2全新发布
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/3532.html

相关产品: DevExtreme跨平台开发框架,

在线
客服
微信
QQ 电话
023-68661681
返回
顶部