彩票走势图

响应式界面控件DevExtreme - 更强的数据分析和可视化功能

翻译|行业资讯|编辑:龚雪|2024-05-30 11:17:02.587|阅读 16 次

概述:本文将为大家回顾DevExtreme中简化数据处理相关任务的功能,欢迎下载最新版组件体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

在这篇文章中,我们将回顾旨在简化数据处理相关任务的功能,这里列出的增强功能包含在DevExtreme v23.1发布周期中。

获取DevExtreme最新正式版下载

DevExpress技术交流群10:532598169      欢迎一起进群讨论

数据源 - 按区域设置排序和筛选

在v23.1中,DataSource允许您对包含与不同语言环境关联的特殊字符(包括带有变音符号的符号)的数据进行排序和筛选。要启用此特性,请在langParams对象中定义区域设置和排序器选项。

DevExtreme产品图集
DataGrid/TreeList - 自定义列选择器

列选择器允许用户在运行时隐藏列,在v23.1版本周期中,DevExtreme引入了3个新的Column Chooser选项。

新的 属性允许您在列选择器窗口中配置选择选项,可用的选项包括:

  • 递归选择 - 您可以选择父元素的选择是否影响子元素/嵌套元素。
  • "Select all" 复选框
  • 通过单击列的标签选择列。
DevExtreme产品图集

对于列选择器中的其他搜索自定义,您可以定义搜索配置对象。例如,您可以指定一个占位符并实现自定义值更改处理逻辑:

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
ColumnChooser,
ColumnChooserSearch,
// ...
} from 'devextreme-react/data-grid';

const searchEditorOptions = {
placeholder: 'Search column',
mode: 'text',
onValueChanged: (e) => {
// handle the value change here
}
};

export default function App() {
return (
<DataGrid ... >
<ColumnChooser ... >
<ColumnChooserSearch
enabled={true}
editorOptions={searchEditorOptions}
// ...
/>
</ColumnChooser>
</DataGrid>
);
}

此外,新属性允许您设置列选择器的显示位置。

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
ColumnChooser,
Position,
// ...
} from 'devextreme-react/data-grid';

export default function App() {
return (
<DataGrid ... >
<ColumnChooser ... >
<Position
my="right top"
at="right bottom"
of=".dx-datagrid-column-chooser-button"
/>
</ColumnChooser>
</DataGrid>
);
}

DataGrid/TreeList/PivotGrid/Gantt - Header过滤器自定义

现在可以在列标题过滤器中个性化搜索参数和搜索框的外观,您可以将搜索框配置为TextBox组件,定义比较规则,并建立超时/延迟(以毫秒为单位)。

DevExtreme产品图集

使用搜索配置对象来全局配置搜索设置,或者使用。搜索配置对象来对各个列进行更改,使用 属性来配置透视网格中的搜索设置。

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import PivotGrid, {
HeaderFilter,
Search,
// ...
} from 'devextreme-react/data-grid';

const searchEditorOptions = {
placeholder: 'Search value',
mode: 'text'
};

export default function App() {
return (
<PivotGrid ... >
<HeaderFilter ... >
<Search
editorOptions={searchEditorOptions}
enabled={true}
timeout={700}
mode="equals"
/>
</HeaderFilter>
</PivotGrid>
);
}


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

DevExpress 企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP