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

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序。从Angular和Reac到ASP.NET Core或VueDevExtreme包含全面的高性能和响应式UI小部件集合可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。在这篇文章中我们将回顾旨在简化数据处理相关任务的功能这里列出的增强功能包含在DevExtreme v23.1发布周期中。DevExpress新旧版本帮助文档 获取可点击这篇文章查看——《界面控件DevExpress v26.1帮助文档大全CHM版本》数据源 - 按区域设置排序和筛选在v23.1中DataSource允许您对包含与不同语言环境关联的特殊字符(包括带有变音符号的符号)的数据进行排序和筛选。要启用此特性请在langParams对象中定义区域设置和排序器选项。DataGrid/TreeList - 自定义列选择器列选择器允许用户在运行时隐藏列在v23.1版本周期中DevExtreme引入了3个新的Column Chooser选项。新的selection 属性允许您在列选择器窗口中配置选择选项可用的选项包括递归选择 - 您可以选择父元素的选择是否影响子元素/嵌套元素。Select all 复选框通过单击列的标签选择列。对于列选择器中的其他搜索自定义您可以定义搜索配置对象。例如您可以指定一个占位符并实现自定义值更改处理逻辑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属性允许您设置列选择器的显示位置。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 myright top atright bottom of.dx-datagrid-column-chooser-button / /ColumnChooser /DataGrid ); }DataGrid/TreeList/PivotGrid/Gantt - Header过滤器自定义现在可以在列标题过滤器中个性化搜索参数和搜索框的外观您可以将搜索框配置为TextBox组件定义比较规则并建立超时/延迟(以毫秒为单位)。使用搜索配置对象来全局配置搜索设置或者使用columns[].headerFilter.search。搜索配置对象来对各个列进行更改使用 fields[].headerFilter.search属性来配置透视网格中的搜索设置。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} modeequals / /HeaderFilter /PivotGrid ); }