Question

以下是我的问题的在线示例：http://jsfiddle.net/xwsuee2j/1/

我在页面上显示多个数据网格。这些数据网格是使用JavaScript对象生成的。这些对象之间的唯一区别是一个字段，所以这就是我为节省大量空间/代码所做的工作。

设置数组对象：

var dxDataGrids = [];

创建标准对象：

var BM_DataGrid = {
    showColumnLines: true,
    showRowLines: true,
    filterRow: {
        visible: true
    },
    searchPanel: {
        visible: true,
        width: 240,
        placeholder: 'Filter Search'
    },
    height: 'calc(100% - 54px)',
    columnAutoWidth: true,
    scrolling: {
        mode: 'standard',
        preloadEnabled: true
    },
    allowColumnResizing: true
};

一些虚拟数据源：

var dataSource1 = [{
    RouteName: 'LE01',
    EmployeeRef: 'DRIVER1',
    VehicleRef: 'VEHICLE1',
    Difference: 0
}, {
    RouteName: 'LE02',
    EmployeeRef: 'DRIVER2',
    VehicleRef: 'VEHICLE2',
    Difference: 0
}, {
    RouteName: 'LE03',
    EmployeeRef: 'DRIVER3',
    VehicleRef: 'VEHICLE3',
    Difference: 0
}];
var dataSource2 = [{
    RouteName: 'LE04',
    EmployeeRef: 'DRIVER4',
    VehicleRef: 'VEHICLE4',
    Difference: 0
}, {
    RouteName: 'LE05',
    EmployeeRef: 'DRIVER5',
    VehicleRef: 'VEHICLE5',
    Difference: 0
}, {
    RouteName: 'LE06',
    EmployeeRef: 'DRIVER6',
    VehicleRef: 'VEHICLE6',
    Difference: 0
}];

那个吐出我数据的位：

dxDataGrids['Grid1'] = BM_DataGrid;
dxDataGrids['Grid2'] = BM_DataGrid;
dxDataGrids['Grid1'].dataSource = dataSource1; // Set DataSource 1
console.log(dxDataGrids['Grid1'].dataSource); // Write out field for 'Grid1' (CORRECT)
dxDataGrids['Grid2'].dataSource = dataSource2; // Set DataSource 2
console.log(dxDataGrids['Grid2'].dataSource); // Write out field for 'Grid2' (CORRECT)
console.log(dxDataGrids['Grid1'].dataSource); // Write out field for 'Grid1' (INCORRECT)

基本上我想知道为什么更新其中一个对象数组，它会更新所有对象数组？

Answer 1

你有

dxDataGrids['Grid1'] = BM_DataGrid;
dxDataGrids['Grid2'] = BM_DataGrid;

基本上两个数组元素都指向同一个对象。

然后设置

dxDataGrids['Grid1'].dataSource = dataSource1;

您在datasource对象上设置了BM_DataGrid，该对象在

上具有相同的datasource属性

dxDataGrids['Grid2'].dataSource = dataSource2;

因为两个数组元素都是同一个对象，记得吗？因此，“最后”dataSource作业“获胜”，这正是您所看到的。

有道理吗？

干杯，

Answer 2

Anders完全回答了为什么会发生这种情况，我会尽力帮助您解决问题。您应该创建多个数据网格，而不是创建一个数据网格并多次引用它，每个参考一个。

function get_std_BM_DataGrid() {
    var dg = {
        showColumnLines: true,
        showRowLines: true,
        filterRow: {
            visible: true
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: 'Filter Search'
        },
        height: 'calc(100% - 54px)',
        columnAutoWidth: true,
        scrolling: {
            mode: 'standard',
            preloadEnabled: true
        },
        allowColumnResizing: true
    };
    return dg;
}

然后只需执行dxDataGrids['Grid1'] = get_std_BM_DataGrid();。

之类的操作

更新数组的所有元素而不是仅更新一个元素

2 个答案: