Question

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

以下是我的网格选项设置代码：

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评估为同一个数组。

您可能需要将scope变量分隔为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));

当网格选项中的columnsDef在多重网格显示期间不同时，Angularjs ng Grid无法显示某些ng网格的数据

1 个答案: