Tôi có một ứng dụng mà người dùng chọn một tùy chọn để lấy dữ liệu lưới từ phía máy chủ và phụ thuộc vào lựa chọn của người dùng, số cột dữ liệu lưới có thể thay đổi. Tôi đang sử dụng Angularjs và ng-grid để hiển thị dữ liệu. Lần đầu tiên, nó hoạt động tốt và hiển thị số cột chính xác (ví dụ: 2 cột). nhưng khi người dùng chọn tùy chọn khác, có 3 cột lưới dữ liệu, ng-lưới vẫn nghĩ về các cột cũ thông tin và cố gắng để ánh xạ thứ hai 3-cols lưới dữ liệu trong 2 cột cũ. Vì thông tin cột không có sẵn, tôi không thể sử dụng cộtDef trong bộ điều khiển. Làm thế nào tôi có thể làm mới cột ng lưới.
Lưu ý: Tôi đã cố gắng để đặt mã tại jsFiddle (http://jsfiddle.net/User888/pwUeX/11/), nhưng bằng cách nào đó, tôi không thể chạy nó. Mã hoàn chỉnh của tôi ở đây.Làm thế nào để làm mới ng lưới khi griddata có số cột khác nhau từ griddata hiển thị trước đây
Ngoài ra: Làm cách nào tôi có thể hiển thị hàng # trong lưới ng mà không gửi nó từ máy chủ.
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 là:
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;
}
};
});
và css trông giống như:
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 400px;
}
Tôi sẽ cảnh báo rằng việc tạo lại mảng colDefs mỗi lần có thể tốn khá nhiều tài nguyên. Ng lưới thực hiện rất nhiều khoảng cách tính toán mỗi khởi tạo. Bạn có thể được phục vụ tốt hơn thay đổi thông số "hiển thị: đúng/sai" thay thế. – Clev3r