当前位置: 首页 > 工具软件 > DevExtreme > 使用案例 >

B/S端界面控件DevExtreme - 全新的工具栏自定义API

金飞翼
2023-12-01

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

 类似资料: