DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

在這篇文章中，我們將回顧旨在簡化數(shù)據(jù)處理相關(guān)任務(wù)的功能，這里列出的增強功能包含在DevExtreme v23.1發(fā)布周期中。

獲取DevExtreme最新正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進群討論

數(shù)據(jù)源 - 按區(qū)域設(shè)置排序和篩選

在v23.1中，DataSource允許您對包含與不同語言環(huán)境關(guān)聯(lián)的特殊字符(包括帶有變音符號的符號)的數(shù)據(jù)進行排序和篩選。要啟用此特性，請在langParams對象中定義區(qū)域設(shè)置和排序器選項。

DataGrid/TreeList - 自定義列選擇器

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

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

• 遞歸選擇 - 您可以選擇父元素的選擇是否影響子元素/嵌套元素。
• "Select all" 復(fù)選框
• 通過單擊列的標(biāo)簽選擇列。

對于列選擇器中的其他搜索自定義，您可以定義搜索配置對象。例如，您可以指定一個占位符并實現(xiàn)自定義值更改處理邏輯：

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>
);
}

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

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過濾器自定義

現(xiàn)在可以在列標(biāo)題過濾器中個性化搜索參數(shù)和搜索框的外觀，您可以將搜索框配置為TextBox組件，定義比較規(guī)則，并建立超時/延遲(以毫秒為單位)。

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

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