在本文中，我們主要介紹全新的DataGrid和TreeList工具欄自定義API，并向您展示如何在下一個(gè)DevExtreme驅(qū)動(dòng)的應(yīng)用程序中利用其功能。

DevExtreme v21.2正式版下載

全新的toolbar屬性

在以前的版本中，您可以使用 onToolbarPreparing 事件處理程序自定義工具欄。盡管這種方法解決了基本用例，但它不允許您動(dòng)態(tài)修改工具欄或以聲明方式配置工具欄（對(duì)于 Angular、React 和 Vue 用戶(hù)很重要）。 為了解決這個(gè)限制，v21.2附帶了一個(gè)新的屬性：

toolbar: {
visible: Boolean, // `true` - the toolbar is visible;
// `false` - the toolbar is hidden;
// `undefined` - the toolbar is visible if it contains items
disabled: Boolean, // Specifies whether the toolbar responds to user interaction
items: Object[] // Configures toolbar items
}

常見(jiàn)用例

在接下來(lái)的部分中，我們將描述一些使用場(chǎng)景并討論新的toolbar屬性的使用。請(qǐng)注意，雖然每個(gè)代碼清單僅針對(duì)我們支持的框架，但所用的新功能都可用于Angular、Vue、React、jQuery、ASP.NET MVC 和 ASP.NET Core。

添加自定義工具欄項(xiàng)

要配置工具欄項(xiàng)，您需要指定 items 數(shù)組，該數(shù)組可以包含預(yù)定義的項(xiàng)目（導(dǎo)出按鈕、搜索面板等）和自定義項(xiàng)目。以下代碼將自定義 'Refresh’ 按鈕添加到工具欄，請(qǐng)注意：如果您希望最終用戶(hù)可以使用它們，還應(yīng)該在代碼中聲明預(yù)定義的項(xiàng)目（例如Column Chooser按鈕）。

Angular

<!-- app.component.html -->
<dx-data-grid id="gridContainer">
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
<dxo-toolbar>
<dxi-item location="after">
<dx-button
icon="refresh"
(onClick)="refreshDataGrid($event)">
</dx-button>
</dxi-item>
<dxi-item name="columnChooserButton"></dxi-item>
</dxo-toolbar>
</dx-data-grid>
// app.component.ts
// ...
import {
DxDataGridModule,
DxDataGridComponent
} from "devextreme-angular/ui/data-grid";
import { DxButtonModule } from "devextreme-angular/ui/button";

@Component({
// ...
})
export class AppComponent {
@ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
refreshDataGrid() {
this.dataGrid.instance.refresh();
}
}

刪除或重新排列工具欄項(xiàng)目

如果您聲明自定義items數(shù)組，則默認(rèn)數(shù)組將被覆蓋，可以利用此行為來(lái)刪除工具欄項(xiàng)（不要將其包含在自定義數(shù)組中）。

UI 中的工具欄項(xiàng)會(huì)保留它們的聲明順序，如果您想重新排列工具欄項(xiàng)目，只需修改它們的聲明順序，您還可以控制工具欄項(xiàng)目出現(xiàn)的位置（location屬性指定工具欄項(xiàng)目在工具欄本身內(nèi)的位置）。在以下示例中，位置屬性用于將搜索面板移動(dòng)到工具欄的左側(cè)：

React

export default function App() {
return (
<DataGrid>
<ColumnChooser enabled={true} />
<SearchPanel visible={true} />
<Editing allowAdding={true} allowUpdating={true} allowDeleting={true} />
<Toolbar>
<Item name="searchPanel" location="before" />
<Item name="columnChooserButton" />
<Item name="addRowButton" />
</Toolbar>
</DataGrid>
);
}

自定義預(yù)定義工具欄項(xiàng)

如果您不想從頭開(kāi)始定義工具欄項(xiàng)，可以使用 options 屬性自定義預(yù)定義項(xiàng)，此屬性接受用作工具欄項(xiàng)的 DevExtreme 組件的配置。 例如，要自定義 Add Row 按鈕，請(qǐng)使用 DevExtreme Button 屬性； 對(duì)于 Export 按鈕，使用 DropDownButton 屬性等。以下代碼覆蓋 Add Row 按鈕的 onClick 事件處理程序，并將自定義項(xiàng)添加到 Export 下拉菜單中。 請(qǐng)注意，導(dǎo)出菜單項(xiàng)數(shù)組包含未定義的條目，它們用作默認(rèn)菜單命令的占位符。

React

export default function App() {
const dataGridRef = useRef();
const addRowButtonOptions = useMemo(() => {
return {
onClick() {
dataGridRef.current.instance.addRow();
notify("Add Row was clicked");
}
};
}, []);
const exportButtonOptions = useMemo(() => {
return {
items: [
undefined,
undefined,
{
icon: "export",
text: "Export to CSV",
onClick() {
notify("Export to CSV was selected");
}
}
]
};
}, []);

return (
<DataGrid
ref={dataGridRef}>
<Editing allowAdding={true} allowUpdating={true} allowDeleting={true} />
<Export enabled={true} allowExportSelectedData={true} />
<Toolbar>
<Item name="addRowButton" options={addRowButtonOptions} />
<Item name="exportButton" options={exportButtonOptions} />
</Toolbar>
</DataGrid>
);
}

禁用/啟用工具欄項(xiàng)

Toolbar items包括一個(gè)禁用的屬性，您可以使用此屬性來(lái)控制用戶(hù)與各個(gè)工具欄項(xiàng)的交互（工具欄項(xiàng)是否響應(yīng)單擊）。

Vue

<template>
<DxDataGrid>
<DxColumnChooser :enabled="true" />
<DxSearchPanel :visible="true" />
<DxToolbar>
<DxItem name="columnChooserButton" :disabled="isColumnChooserDisabled" />
<DxItem name="searchPanel" />
</DxToolbar>
</DxDataGrid>
<DxCheckBox
text="Disable the Column Chooser Button"
v-model="isColumnChooserDisabled"
/>
</template>
<script>
// ...
export default {
// ...
data() {
return {
isColumnChooserDisabled: true
};
}
};
</script>

隱藏/顯示工具欄

要控制工具欄的可見(jiàn)性，請(qǐng)使用 屬性。

Angular

<!-- app.component.html -->
<dx-data-grid>
<!-- … -->
<dxo-toolbar [visible]="isToolbarVisible"></dxo-toolbar>
</dx-data-grid>
<dx-check-box
text="Display the Toolbar"
[(value)]="isToolbarVisible">
</dx-check-box>
// app.component.ts
// …
export class AppComponent {
isToolbarVisible: boolean = true;
// ...
}

DevExtreme | 下載試用

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ù)編輯器等。

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