Angularjs ng Grid，在多 ng grids 显示期间，当 Grid Options 中的 columnsDef 不同时，无法显示某些 ng grids 的数据

Question

我试图通过单击按钮显示多个 ngGrid。但是当 Grid 选项中的 columnDef 选项对于这些 Grid 不同时，问题就来了。请找到我的 plunker http://plnkr.co/edit/y878sCsl3PJ04MhcAKYI?p=preview。这里当我们点击 'create multiple ng grids' 时，Grid 2 和 Grid 3 数据显示正常，因为这两列 Grid 选项中的 Def 是相同的。但是 Grid1 数据没有出现，它在 Grid Options 中的 columnDef 与 Grid2 和 Grid3 不同。作为参考，我通过 'Create ng Grid1' 和 'Create ng Grid2' 分别将它们分开，它们工作正常。我正在尝试使用 'Create Multple ng Grids' 按钮一起创建相同的网格。但是第一个网格数据没有出现。谁能帮我解决一下？

以下是我的Grid Options设置代码：

if (dashletteId == 1) {

    $scope.myData = $scope.tabs[dashVar].data;
    $scope.myColumnDefs = $scope.getColumnDefs($scope.tabs[dashVar].columns);
    $scope[gridOptions] = {
        data: 'myData',
        showGroupPanel: true,
        jqueryUIDraggable: false,
        columnDefs: $scope.myColumnDefs
    };



} else {


    $scope.myData = $scope.tabs[dashVar].data;
    $scope.myColumnDefs = $scope.tabs[dashVar].columns;
    $scope[gridOptions] = {
        data: 'myData',
        showGroupPanel: true,
        jqueryUIDraggable: false,
        columnDefs: $scope.myColumnDefs
    };
}

$scope.getColumnDefs = function( columns ){
    var columnDefs = [];

    columnDefs.push({field: 'mode', displayName: 'Mode', enableCellEdit: true, width: '10%'});
    columnDefs.push({field:'service', displayName:'Service', enableCellEdit: true, width: '10%'});

    angular.forEach(columns, function( value, key ) {
        columnDefs.push({field: key, displayName: value, enableCellEdit: true, width: '10%' })
    });

    return columnDefs;
};

Answer 1

你所有的 3 个网格 columnDefs 都指向 $scope.myColumnDefs 最终所有网格的 columnDefs 都被评估为同一个数组。

您可能需要分离要分配给 columnDefs 的范围变量。

var template = '<div class= "chartsDiv">';

var config = {
    1: {
        gridOptions: 'gridOptionsOne',
        data: 'dataOne',
        columnDefs: 'colDefsOne'
    },
    2: {
        gridOptions: 'gridOptionsTwo',
        data: 'dataTwo',
        columnDefs: 'colDefsTwo'
    },
    3: {
        gridOptions: 'gridOptionsThree',
        data: 'dataThree',
        columnDefs: 'colDefsThree'
    },
};
for (var dashVar = 0; dashVar < $scope.tabs.length; dashVar++) {
    var name = "Recovery";
    var dashletteId = $scope.tabs[dashVar].dashletteId;
    var axisType = $scope.tabs[dashVar].axisType;
    var chartName = "chart" + name.replace(/ +/g, "") + dashVar;
    var tableData = "chart" + name.replace(/ +/g, "") + dashVar;
    var gridOptions = "gridOptions" + chartName;


    if (axisType == "table") {


        if (dashletteId == 1) {
            $scope[config[dashletteId].columnDefs] = $scope.getColumnDefs($scope.tabs[dashVar].columns);
        } else {
            $scope[config[dashletteId].columnDefs] = $scope.tabs[dashVar].columns;
        }
        $scope[config[dashletteId].data] = $scope.tabs[dashVar].data;
        $scope[config[dashletteId].gridOptions] = {
            data: config[dashletteId].data,
            showGroupPanel: true,
            jqueryUIDraggable: false,
            columnDefs: config[dashletteId].columnDefs
        };

        template += ' <div class="col"> <p class="graphtitle">' + $scope.tabs[dashVar].dashletteName + ' </p> <div class="gridStyle" ng-grid="' + config[dashletteId].gridOptions + '"></div>';
    }


}

template += ' </div>';
//  alert(template)
angular.element(document.body).append($compile(template)($scope));

Angularjs ng Grid，在多 ng grids 显示期间，当 Grid Options 中的 columnsDef 不同时，无法显示某些 ng grids 的数据

Angularjs ng Grid, unable to show data for some ng grids when their columnsDef in Grid Options is different during multi ng grids display

javascript

angularjs

ng-grid