16

我确实有一个应用程序，用户选择一个选项从服务器端获取网格数据并取决于用户选择的选项，网格数据中的列数可能会有所不同。我正在使用 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;
}
4

3 回答 3

10

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

scope.gridOptions.ngGrid.buildColumns();

buildColumns() 是主要功能，您需要重新定义 columnDefs 数组，如提到的 brentiumbrent

于 2013-12-31T16:50:44.377 回答
8

Though a bug in ng-grid prevents this answer from working well with enableColumnResize: true (changes to columnDefs after a column change will result in invisible data), under basic circumstances you can do something along the lines of 

$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
};

Here's a working plunker demonstrating it with your example: http://plnkr.co/edit/w1DLtS

于 2013-07-10T20:16:32.830 回答
0

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

我的一个服务：

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

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

于 2014-08-25T11:16:54.760 回答