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

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,
    ....
};

并在 View 中

<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');