gpt4 book ai didi

angularjs - 当griddata的列数与之前显示的griddata不同时如何刷新ng-grid

转载 作者:行者123 更新时间:2023-12-03 14:52:22 24 4
gpt4 key购买 nike

我确实有一个应用程序,其中用户选择一个选项从服务器端获取网格数据,并取决于用户选择的选项,网格数据中的列数可能会有所不同。我正在使用 Angularjs 和 ng-grid 来显示数据。第一次,它工作正常,并且确实显示了正确的列数(例如 2 列)。但是当用户选择其他选项时,它获取 3 列网格数据,ng-grid 仍然会考虑旧列信息并尝试在旧 2 列中映射第二个 3-cols 网格数据。由于列信息不可用,我不能在 Controller 中使用 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>

我的 Controller 是:
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;
}

最佳答案

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

scope.gridOptions.ngGrid.buildColumns();

buildColumns() 是主要功能,您需要像 brentiumbrent 提到的那样重新定义 columnDefs 数组

关于angularjs - 当griddata的列数与之前显示的griddata不同时如何刷新ng-grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17270109/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com