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

【问题标题】：Create a generic variable for a grid to reuse the configuration in each grid为网格创建通用变量以重用每个网格中的配置
【发布时间】：2016-05-30 11:53:33
【问题描述】：

我正在使用 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 支持成员解释说：

数据网格配置是一个常规的 JavaScript 对象。你可以使用默认网格配置创建一个对象变量并使用它适用于每个网格。使用 jQuery.extend() 函数添加新的必要时为您的默认配置对象添加选项/属性。

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

【问题讨论】：

标签： javascript jquery asp.net-mvc model-view-controller devextreme

【解决方案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');

【讨论】：