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

DevExtreme v21.2正式版下載

全新的toolbar屬性

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

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>

隱藏/顯示工具欄

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

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      歡迎一起進群討論