angularjs - columndefs - Cómo actualizar ng-grid cuando griddata tiene un número diferente de columnas de griddata anteriores
ui-grid columndefs (3)
Aunque un error en ng-grid impide que esta respuesta funcione bien con enableColumnResize: true (los cambios en columnDefs después de un cambio de columna darán como resultado datos invisibles), en circunstancias básicas, puede hacer algo en la línea de
$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
};
Aquí hay un trabajador que lo demuestra con su ejemplo: http://plnkr.co/edit/w1DLtS
Tengo una aplicación donde el usuario selecciona una opción para obtener datos de cuadrícula del lado del servidor y, dependiendo de la opción que seleccione el usuario, el número de columnas en los datos de cuadrícula puede variar. Estoy usando Angularjs y ng-grid para mostrar datos. La primera vez, funciona bien y muestra el número correcto de columnas (por ejemplo, 2 columnas). pero cuando el usuario selecciona otra opción, que obtiene 3 columnas de datos de cuadrícula, ng-grid aún piensa en la información de las columnas antiguas e intenta asignar los segundos datos de cuadrícula de 3 columnas en las 2 columnas antiguas. Dado que la información de las columnas no está disponible, no puedo usar columnDefs en el controlador. ¿Cómo puedo actualizar las columnas ng-grid.
Nota: Intenté colocar el código en jsFiddle ( http://jsfiddle.net/User888/pwUeX/11/ ), pero de alguna manera, no puedo ejecutarlo. Mi código completo está aquí.
También: ¿Cómo puedo mostrar la fila # en ng-grid sin enviarlo desde el servidor.
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>
Mi controlador es:
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;
}
};
});
y css se ve como:
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 400px;
}
También me encontré con este problema cuando intenté hacer esto como un servicio (no tengo que configurarlo todo el tiempo que lo necesito).
Una pieza de mi servicio:
setColumns: function(columnDefs){
$rootScope.columnDefs = columnDefs;
return $rootScope.columnDefs;
}
Doy nuevos nombres de columna y campos en array (columnDefs) después de asignar nuevas columnas.
También puede llamar a un método que se proporciona en el código fuente. Es posible que esto no estuviera disponible en el momento de la pregunta, pero yo mismo me encontré con el problema. Si puedes apuntar a la cuadrícula en sí, puedes usar algo similar a este fragmento de código
scope.gridOptions.ngGrid.buildColumns();
buildColumns () es la función principal y necesitas redefinir la matriz columnDefs como se mencionó en brentiumbrent