在本文中，我們主要介紹全新的DataGrid和TreeList工具欄自定義API，並向您展示如何在下一個DevExtreme驅動的應用程式中利用其功能。

DevExtreme v21.2正式版下載

全新的toolbar屬性

在以前的版本中，您可以使用 onToolbarPreparing 事件處理程式自定義工具欄。儘管這種方法解決了基本用例，但它不允許您動態修改工具欄或以宣告方式配置工具欄（對於 Angular、React 和 Vue 使用者很重要）。 為了解決這個限制，v21.2附帶了一個新的toolbar屬性：

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
}

常見用例

在接下來的部分中，我們將描述一些使用場景並討論新的toolbar屬性的使用。請注意，雖然每個程式碼清單僅針對我們支援的框架，但所用的新功能都可用於Angular、Vue、React、jQuery、ASP.NET MVC 和 ASP.NET Core。

新增自定義工具欄項

要配置工具欄項，您需要指定 items 陣列，該陣列可以包含預定義的專案（匯出按鈕、搜尋面板等）和自定義專案。以下程式碼將自定義 'Refresh’ 按鈕新增到工具欄，請注意：如果您希望終端使用者可以使用它們，還應該在程式碼中宣告預定義的專案（例如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();
}
}

刪除或重新排列工具欄專案

如果您宣告自定義items陣列，則預設陣列將被覆蓋，可以利用此行為來刪除工具欄項（不要將其包含在自定義陣列中）。

UI 中的工具欄項會保留它們的宣告順序，如果您想重新排列工具欄專案，只需修改它們的宣告順序，您還可以控制工具欄專案出現的位置（location屬性指定工具欄專案在工具欄本身內的位置）。在以下示例中，位置屬性用於將搜尋面板移動到工具欄的左側：

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

自定義預定義工具欄項

如果您不想從頭開始定義工具欄項，可以使用 options 屬性自定義預定義項，此屬性接受用作工具欄項的 DevExtreme 元件的配置。 例如，要自定義 Add Row 按鈕，請使用 DevExtreme Button 屬性； 對於 Export 按鈕，使用 DropDownButton 屬性等。以下程式碼覆蓋 Add Row 按鈕的 onClick 事件處理程式，並將自定義項新增到 Export 下拉選單中。 請注意，匯出選單項陣列包含未定義的條目，它們用作預設選單命令的佔位符。

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

禁用/啟用工具欄項

Toolbar items包括一個禁用的屬性，您可以使用此屬性來控制使用者與各個工具欄項的互動（工具欄項是否響應單擊）。

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>

隱藏/顯示工具欄

要控制工具欄的可見性，請使用 visible 屬性。

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小部件集合，使您可以利用現代Web開發堆疊（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建互動式的Web應用程式。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高效能和響應式UI小部件集合，可在傳統Web和下一代移動應用程式中使用。 該套件附帶功能齊全的資料網格、互動式圖表小部件、資料編輯器等。

DevExpress技術交流群6：600715373      歡迎一起進群討論

更多DevExpress線上公開課、中文教程資訊請上中文網獲取