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對象中定義區域設置和排序器選項。

DataGrid/TreeList - 自定義列選擇器

列選擇器允許用戶在運行時隱藏列，在v23.1版本周期中，DevExtreme引入了3個新的Column Chooser選項。

新的 屬性允許您在列選擇器窗口中配置選擇選項，可用的選項包括：

• 遞歸選擇 - 您可以選擇父元素的選擇是否影響子元素/嵌套元素。
• "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>
);
}

此外，新屬性允許您設置列選擇器的顯示位置。

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組件，定義比較規則，并建立超時/延遲(以毫秒為單位)。

使用搜索配置對象來全局配置搜索設置，或者使用。搜索配置對象來對各個列進行更改，使用 屬性來配置透視網格中的搜索設置。

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線上公開課、中文教程資訊請上中文網獲取