如何刷新NG-网格时的GridData有不同的列数从previous显示的GridData [英] How to refresh ng-grid when griddata has different number of columns from previous displayed griddata
问题描述
我确实有用户选择一个选项，以从服务器侧获得的网格数据和取决于什么选项用户选择，列在网格数据的数量可能会有所不同的应用程序。我使用Angularjs和NG-网格显示数据。第一次，它工作正常，它显示的列（例如2列）的正确数量。但是，当用户选择了其他选项，它可以获取3列网格的数据，NG-格还认为老列的信息，并试图映射老2列第二三COLS网格的数据。由于列的信息是不可用的，我不能在控制器使用columnDefs。我怎样才能刷新NG-网格列。结果
注：我试图把在的jsfiddle（ http://jsfiddle.net/User888/pwUeX/11/），但不知何故，我不能够运行它。我完全code是在这里。
另外：我怎样才能显示NG-网格行＃不受服务器将其发送
我的HTML文件：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;
＆LT;头LANG =ENGT＆;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;测试与LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://angular-ui.github.io/ng-grid/lib/ng-grid.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =gridExample.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =http://angular-ui.github.io/ng-grid/css/ng-grid.css/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =CSS / style.css文件/＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=GridExampleCtrl＆GT;
＆LT; DIV＆GT;
网格的选择：
＆LT;选择NG模型=gridSelectedId＆GT;
＆LT;选项NG重复=gridSel在gridSelsVALUE ={{gridSel.GridSelId}}＆GT; {{gridSel.GridSelName}}＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT; BR /＆gt;用户选择：{{gridSelectedId}}＆LT; BR＆GT;＆LT;小时＆GT;
＆LT; DIV＆GT;
＆LT;按钮NG点击=显示（）＆GT;显示与LT; /按钮＆GT;＆LT;小时＆GT;
＆LT; DIV CLASS =gridStyleNG格=gridOptions＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我的控制器是：
VAR应用= angular.module（'对myApp'，['ngGrid']）;app.controller（'GridExampleCtrl'，函数（$范围，$ HTTP，$超时）{ $ scope.myData = []; $ scope.grid1 = [{名：grid1a，年龄：50}，
{名：grid1b，年龄：43}，
{名：grid1c，年龄：50}，
{名：grid1d，年龄：29}，
{名：grid1e，年龄：34}]; $ scope.grid2 = {[名字：grid2a，年龄：50，状态：爱达荷}，
{名字：grid2b，年龄：43，状态：'纽约'}，
{名字：grid2c，年龄：50，状态：加利福尼亚}，
{名字：grid2d，年龄：29，状态：亚利桑那州}，
{名字：grid2e，年龄：34，状态：犹他}]; $ scope.gridSels = [
{GridSelId：1，GridSelName：网格1}，
{GridSelId：2，GridSelName：网格2'}
] $ scope.gridOptions = {
数据：myData的，
enableColumnResize：真实，
showGroupPanel：真实，
// pagingOptions：$ scope.pagingOptions
}; $ scope.display =功能（）{
的console.log（用户选择网格：+ $ scope.gridSelectedId）;
如果（$ scope.gridSelectedId == 1）{
$ scope.myData = $ scope.grid1;
}其他{
$ scope.myData = $ scope.grid2;
}
};}）;
和CSS是这样的：
.gridStyle {
边框：1px的固体RGB（212212212）;
宽度：800像素;
高度：400像素;
}
$ scope.colDefs = [];$范围。$表（myData的'，函数（）{
$ scope.colDefs = []; angular.forEach（Object.keys（$ scope.myData [0]），功能（键）{
$ scope.colDefs.push（{域：关键}）;
}）;
}
）;$ scope.gridOptions = {
数据：myData的，
columnDefs：colDefs'，
enableColumnResize：假的，
showGroupPanel：真
};
下面是一个工作plunker您的例子来展示它：
http://plnkr.co/edit/w1DLtS
I do have an application where user selects an option to get grid data from server side and depend upon what option user selects, the number of columns in grid data may vary. I am using Angularjs and ng-grid to display data. The first time, it works fine and it does display correct number of columns (e.g 2 columns). but when user selects other option, which gets 3 columns grid-data, ng-grid still thinks of old columns information and tries to map second 3-cols grid-data in old 2 columns. Since columns info is not available, I cannot use columnDefs in controller. How can I refresh ng-grid columns.
Note: I tried to put code at jsFiddle (http://jsfiddle.net/User888/pwUeX/11/), but somehow, I am not able to run it. My complete code is here.
Also: How can I display row# in ng-grid without sending it from server.
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>
My Controller is:
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;
}
};
});
and css looks like:
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 400px;
}
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
这篇关于如何刷新NG-网格时的GridData有不同的列数从previous显示的GridData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
