当网格数据的列数与以前显示的网格数据不同时，如何刷新ng-grid
我有一个应用程序，用户选择一个选项从服务器端获取网格数据，根据用户选择的选项，网格数据中的列数可能会有所不同。我使用Angularjs和ng-grid来显示数据。第一次，它工作得很好，它确实显示了正确的列数(例如2列)。但是，当用户选择其他选项，即获取3列的网格数据时，ng-grid仍然会考虑旧的列信息，并尝试将第二个3列的网格数据映射到旧的2列中。因为列信息不可用，所以我不能在控制器中使用columnDefs。如何刷新ng-grid列。
注意:我试图将代码放在jsFiddle (http://jsfiddle.net/User888/pwUeX/11/)中，但不知何故，我无法运行它。我的完整代码在这里。
另外:如何在ng-grid中显示row#而不从服务器发送它。
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;
}回答 3
Stack Overflow用户
发布于 2013-07-11 04:16:33
尽管ng-grid中的a bug不能很好地使用enableColumnResize: true (更改列之后对columnDefs的更改将导致不可见的数据)，但在基本情况下，您可以这样做
$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
};这是一个有效的柱塞，用你的例子演示了它：http://plnkr.co/edit/w1DLtS
Stack Overflow用户
发布于 2014-01-01 00:50:44
您还可以调用源代码中提供的方法。在提出问题时，这可能是不可用的，但我自己也遇到了这个问题。如果您能够针对网格本身，则可以使用类似下面这段代码的内容
scope.gridOptions.ngGrid.buildColumns();buildColumns()是主要函数，您需要按照brentiumbrent所述重新定义columnDefs数组
Stack Overflow用户
发布于 2014-08-25 19:16:55
当我试图将它作为服务时，我也遇到了这个问题(不需要一直自己设置，我需要它)。
我的服务的一部分：
setColumns: function(columnDefs){
$rootScope.columnDefs = columnDefs;
return $rootScope.columnDefs;
}在分配新的列之后，我在数组(columnDefs)中给出了新的列名和字段。
https://stackoverflow.com/questions/17270109
复制相似问题