Question

我确实有一个应用程序，用户选择从服务器端获取网格数据的选项，并取决于用户选择的选项，网格数据中的列数可能会有所不同。我正在使用Angularjs和ng-grid来显示数据。第一次，它工作正常，它确实显示正确的列数（例如2列）。但是当用户选择其他选项（获得3列网格数据）时，ng-grid仍会考虑旧列信息并尝试在旧2列中映射第二个3-cols网格数据。由于列信息不可用，我无法在控制器中使用columnDefs。如何刷新ng-grid列注意：我试图将代码放在jsFiddle（http://jsfiddle.net/User888/pwUeX/11/），但不知何故，我无法运行它。我的完整代码就在这里。

另外：如何在不从服务器发送行的情况下在ng-grid中显示行＃。

My HTML file:
<!DOCTYPE html>
<html ng-app="myApp">  
    <head lang="en">
        <meta charset="utf-8">
        <title>test </title>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.io/ng-grid/lib/ng-grid.js"></script>
        <script type="text/javascript" src="gridExample.js"></script>

        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body ng-controller="GridExampleCtrl">
    <div>
        Grid Selection:    
        <select ng-model="gridSelectedId">
            <option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
        </select>   

        <br/>User selected:  {{gridSelectedId}} <br><hr>    
        <div>
            <button ng-click="display()">Display</button><hr>
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </div>      
    </div> 
   </body>
</html>

我的控制器是：

var app = angular.module('myApp', ['ngGrid']);

app.controller('GridExampleCtrl', function ($scope, $http, $timeout) {    

    $scope.myData = [];

    $scope.grid1 = [{name: "grid1a", age: 50},
                    {name: "grid1b", age: 43},
                    {name: "grid1c", age: 50},
                    {name: "grid1d", age: 29},
                    {name: "grid1e", age: 34}];

    $scope.grid2 = [{lastname: "grid2a", age: 50, state:'Idaho'},
                    {lastname: "grid2b", age: 43, state:'NewYork'},
                    {lastname: "grid2c", age: 50, state:'California'},
                    {lastname: "grid2d", age: 29, state:'Arizona'},
                    {lastname: "grid2e", age: 34, state:'Utah'}];

    $scope.gridSels = [
                        {GridSelId : 1, GridSelName : 'Grid 1' },       
                        {GridSelId : 2, GridSelName : 'Grid 2' }
                        ]

     $scope.gridOptions = { 
                data: 'myData',
                enableColumnResize: true,
                showGroupPanel: true,
                //pagingOptions: $scope.pagingOptions
            };

    $scope.display = function(){
        console.log("User selected grid : " + $scope.gridSelectedId);
        if ($scope.gridSelectedId == 1) {
            $scope.myData = $scope.grid1;           
        } else {
            $scope.myData = $scope.grid2;
        }
    };      

});

和css看起来像：

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 800px; 
    height: 400px;
}

Answer 1

您还可以调用源代码中提供的方法。这可能在提出问题时尚未提供，但我自己也遇到了这个问题。如果你能够定位网格本身，你可以使用类似于这段代码的东西

scope.gridOptions.ngGrid.buildColumns();

buildColumns（）是主要功能，您需要重新定义columnDefs数组，如提到的那样

Answer 2

尽管ng-grid中的a bug阻止了这个答案与enableColumnResize：true（在列更改后更改为columnDef将导致不可见数据），但在基本情况下，您可以执行某些操作。

$scope.colDefs = [];

$scope.$watch('myData', function() { 
 $scope.colDefs = [];

 angular.forEach(Object.keys($scope.myData[0]), function(key){
    $scope.colDefs.push({ field: key });
  });
}
);

$scope.gridOptions = {
    data: 'myData',
    columnDefs: 'colDefs',
    enableColumnResize: false,
    showGroupPanel: true
};

这是一个工作的plunker用你的例子展示它： http://plnkr.co/edit/w1DLtS

Answer 3

当我尝试将其作为服务时，我也遇到了这个问题（我不需要自己一直设置它）。

我的一项服务：

setColumns: function(columnDefs){
  $rootScope.columnDefs = columnDefs;      
  return $rootScope.columnDefs;
}

在分配新列后，我在数组（columnDefs）中给出了新的列名和字段。

当griddata与先前显示的griddata具有不同的列数时，如何刷新ng-grid

3 个答案: