DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(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和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

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

獲取DevExtreme最新正式版下載

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

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

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

DataGrid/TreeList - 自定義列選擇器

列選擇器允許用戶(hù)在運(yùn)行時(shí)隱藏列，在v23.1版本周期中，DevExtreme引入了3個(gè)新的Column Chooser選項(xiàng)。

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

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

對(duì)于列選擇器中的其他搜索自定義，您可以定義搜索配置對(duì)象。例如，您可以指定一個(gè)占位符并實(shí)現(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過(guò)濾器自定義

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

使用搜索配置對(duì)象來(lái)全局配置搜索設(shè)置，或者使用。搜索配置對(duì)象來(lái)對(duì)各個(gè)列進(jìn)行更改，使用 屬性來(lái)配置透視網(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線上公開(kāi)課、中文教程資訊請(qǐng)上中文網(wǎng)獲取