如何在devextreme-vue数据网格中配置多行工具栏？
我尝试使用onToolbarPreparing方法来自定义工具栏。
这是我的代码-
<dx-data-grid :allow-column-reordering="true"
:allow-column-resizing="true"
:columns="config.columns"
:data-source="obligations"
:focused-row-enabled="true"
:focused-row-key.sync="focusedRowKey"
:onInitNewRow="onInitNewRow"
:onOptionChanged="change"
:onRowInserted="onRowInserted"
:onRowInserting="onRowInserting"
:onRowRemoved="onRowRemoved"
:onRowRemoving="onRowRemoving"
:onRowUpdated="onRowUpdated"
:onRowUpdating="onRowUpdating"
:ref="ref"
:rowAlternationEnabled="true"
:show-borders="true"
@focused-row-changed="onFocusRowChanged"
@toolbar-preparing="onToolbarPreparing($event)"
class="dx-datagrid-h-200"
key-expr="entityId">
<dx-column-fixing :enabled="true"/>
<dx-filter-row :apply-filter="currentFilter"
:visible="showFilterRow==='Yes'"/>
<dx-header-filter :visible="showHeaderFilter"/>
<dx-editing :allow-adding="allowEditing"
:allow-deleting="allowEditing"
:allow-updating="allowEditing"
:fixed="true"
:form="form"
:mode="mode"
:use-icons="true"
start-edit-action="click"/>
<dx-export :allow-export-selected-data="true"
:enabled="true"
file-name="Obligations"/>
<dx-group-panel :visible="true"/>
<dx-grouping :auto-expand-all="autoExpandAll"/>
<dx-sorting mode="multiple"/>
<dx-selection :select-all-mode="selectionMode"
mode="multiple"
show-check-boxes-mode="always"/>
<dx-state-storing :custom-load="customLoad"
:custom-save="customSave"
:enabled="true"
type="custom"/>
<dx-paging :enabled="true" :page-count="12"
:page-index="config.pageIndex"
:page-size="config.pageSize"/>
<dx-pager :allowed-page-sizes="config.allowedPageSizes"
:show-info="true"
:show-navigation-buttons="true"
:show-page-size-selector="true"
:visible="true"/>
<dx-column-chooser :allow-search="true"
:enabled="true"
empty-panel-text="Test"
mode="select"
title="Column Settings"/>
</dx-data-grid>
和：
onToolbarPreparing(e) {
e.toolbarOptions.items.push(
{
location: 'after',
widget: 'dxDropDownButton',
options: {
displayExpr: 'name',
keyExpr: 'value',
selectedItemKey: this.mode,
width: 100,
stylingMode: 'outlined',
useSelectMode: true,
onSelectionChanged: (e) => {
this.mode = e.item.value;
},
items: [
{value: 'batch', name: 'Batch', icon: 'fa fa-layer-group'},
{value: 'row', name: 'Row', icon: 'fa fa-list'},
{value: 'form', name: 'Form', icon: 'fa fa-pen-square'},
{value: 'popup', name: 'Popup', icon: 'fa fa-comment-alt'}
]
}
},
{
location: 'after',
widget: 'dxButton',
options: {
icon: this.showFilterRow === 'No' ? 'fa fa-eye' : 'fa fa-eye-slash',
hint: this.showFilterRow === 'No' ? 'Show Filter Row' : 'Hide Filter Row',
width: 40,
onClick: (e) => {
console.dir(e);
this.showFilterRow = this.showFilterRow === 'Yes' ? 'No' : 'Yes';
}
}
},
{
location: 'after',
widget: 'dxDropDownButton',
options: {
displayExpr: 'name',
keyExpr: 'value',
selectedItemKey: this.stateId,
width: 100,
stylingMode: 'outlined',
useSelectMode: true,
onSelectionChanged: (e) => {
this.stateId = e.item.value;
this.config = this.setupColumns(e.item.query);
this.$emit('updateParcels');
},
items: this.states
}
},
{
location: 'after',
widget: 'dxButton',
options: {
icon: 'fa fa-bookmark',
hint: 'Save Table Filters',
onClick: (e) => {
this.newState = JSON.parse(JSON.stringify(this.updatedState));
this.popupVisible = true;
}
}
},
{
location: 'after',
widget: 'dxButton',
options: {
icon: 'refresh',
width: 500,
hint: 'Refresh',
onClick: (e) => {
this.$emit('updateParcels');
}
}
}
);
},
我已经尝试增加按钮的宽度，但是将其他控制按钮组合在组合框中。
我想要5个按钮来满足工具栏中的业务功能，并且我不希望它们与网格控制按钮位于同一行。这就是为什么我要两行工具栏，第一行用于网格控件，第二行用于业务功能。
这有可能吗？如果是，那怎么办？
DevExtreme DataGrid在其工具栏区域中使用Toolbar widget。工具栏小部件不支持多行功能。