DevExpress官网

在本文中，我们主要介绍全新的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线上公开课、中文教程资讯请上中文网获取

相关产品： DevExtreme跨平台开发框架,