为网格创建通用变量以在每个网格中重用配置

Question

我正在使用 DevExpress 的 DevExtreme 控件，更具体地说是 DxDataGrid。

现在，每次我使用 DxDataGrid 时，我都需要像这样指定配置：

var grid = $("#myGrid").dxDataGrid({
    // These options need to be specified for each DxDataGrid
    dataSource: {
        ...
    },
    columns: [
        ...                
    ],
    editing: {
        ...                
    },
    // The following options are always the same for every DxDataGrid
    columnChooser: {
        enabled: true
    },
    allowColumnReordering: true,
    sorting: {
        mode: 'multiple'
    },
    groupPanel: {
        visible: true,
        emptyPanelText: 'Blabla'
    },
    pager: {
        visible: true,
        showNavigationButtons: true,
        showInfo: true,
        showPageSizeSelector: true,
        allowedPageSizes: [10, 20, 50, 100]
    },
    paging: {
        pageSize: 10
    },
    filterRow: {
        visible: true
    },
    searchPanel: {
        visible: true,
        placeholder: 'Buscar'
    },
}).dxDataGrid('instance');

我想避免为每个 DxDataGrid 都相同的所有配置参数重复代码。在下面 question DevExpress 支持成员解释说：

The data grid configuration is a regular JavaScript object. You can create an object variable with the default grid configuration and use it for each grid. Use the jQuery.extend() function to add new options/properties to your default configure object when necessary.

我不知道该怎么做，也没有可用的代码示例。有帮助吗？

Answer 1

创建一个包含通用选项的全局变量的外部文件，例如

var commonOptions = { 
    columnChooser: {
        enabled: true
    },
    allowColumnReordering: true,
    ....
};

并在视图中

<script src="~/Scripts/DxDataGridCommonOptions.js"></script> // load the common options into the view
var viewOptions = { 
    dataSource: {
    .... // your view specific options
    },
    ....
};
var grid = $("#myGrid").dxDataGrid(
    $.extend(commonOptions, viewOptions) // merge the 2 sets of options
).dxDataGrid('instance');

为网格创建通用变量以在每个网格中重用配置

Create a generic variable for a grid to reuse the configuration in each grid

javascript

model-view-controller

asp.net-mvc

jquery

devextreme