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

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最新正式版下载(Q技术交流:532598169)

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

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

DataGrid/TreeList - 自定义列选择器

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

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

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

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

javascript 复制代码
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>
);
}

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

javascript 复制代码
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组件,定义比较规则,并建立超时/延迟(以毫秒为单位)。

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

javascript 复制代码
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>
);
}
相关推荐
RestCloud13 小时前
数据传输中的三大难题,ETL 平台是如何解决的?
数据分析·api
Yasin Chen3 天前
Unity UI坐标说明
ui·unity
IT毕设梦工厂3 天前
大数据毕业设计选题推荐-基于大数据的客户购物订单数据分析与可视化系统-Hadoop-Spark-数据可视化-BigData
大数据·hadoop·数据分析·spark·毕业设计·源码·bigdata
大数据CLUB3 天前
基于spark的澳洲光伏发电站选址预测
大数据·hadoop·分布式·数据分析·spark·数据开发
智数研析社3 天前
9120 部 TMDb 高分电影数据集 | 7 列全维度指标 (评分 / 热度 / 剧情)+API 权威源 | 电影趋势分析 / 推荐系统 / NLP 建模用
大数据·人工智能·python·深度学习·数据分析·数据集·数据清洗
qingyunliushuiyu3 天前
BI数据可视化:驱动数据价值释放的关键引擎
数据挖掘·数据分析·数据分析系统·数据分析平台·bi数据可视化
折翼的恶魔4 天前
数据分析:排序
python·数据分析·pandas
眠りたいです4 天前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
数据牧羊人的成长笔记4 天前
数据分析需要掌握的数学知识(易理解)
数学建模·数据分析
折翼的恶魔4 天前
数据分析:合并二
python·数据分析·pandas