web-dev-qa-db-fra.com

Comment actualiser ng-grid lorsque les griddata ont un nombre de colonnes différent des griddata affichés précédemment

J'ai une application où l'utilisateur sélectionne une option pour obtenir des données de grille du côté serveur et dépend de l'option que l'utilisateur sélectionne, le nombre de colonnes dans les données de grille peut varier. J'utilise Angularjs et ng-grid pour afficher les données. La première fois, cela fonctionne bien et il affiche le nombre correct de colonnes (par exemple 2 colonnes). mais lorsque l'utilisateur sélectionne une autre option, qui obtient les données de grille à 3 colonnes, ng-grid pense toujours aux informations des anciennes colonnes et essaie de mapper les secondes données de grille à 3 colonnes dans les 2 anciennes colonnes. Étant donné que les informations sur les colonnes ne sont pas disponibles, je ne peux pas utiliser columnDefs dans le contrôleur. Comment puis-je actualiser les colonnes ng-grid.
Remarque: J'ai essayé de mettre du code sur jsFiddle ( http://jsfiddle.net/User888/pwUeX/11/ ), mais d'une manière ou d'une autre, je ne suis pas en mesure de l'exécuter. Mon code complet est ici.

Aussi: Comment puis-je afficher la ligne # dans ng-grid sans l'envoyer depuis le serveur.

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>

Mon contrôleur est:

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;
        }
    };      

});

et css ressemble à:

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 800px; 
    height: 400px;
}
angularjsng-grid
16
Ajay Kumar

Bien que n bogue dans ng-grid empêche cette réponse de bien fonctionner avec enableColumnResize: true (les modifications apportées à columnDefs après un changement de colonne entraîneront des données invisibles), dans des circonstances de base, vous pouvez faire quelque chose comme

$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
};

Voici un plunker fonctionnel qui le démontre avec votre exemple: http://plnkr.co/edit/w1DLtS

8
brentiumbrent

Vous pouvez également appeler une méthode fournie dans le code source. Cela n'était peut-être pas disponible au moment de la question, mais j'ai rencontré le problème moi-même. Si vous pouvez cibler la grille elle-même, vous pouvez utiliser quelque chose de similaire à ce morceau de code

scope.gridOptions.ngGrid.buildColumns();

buildColumns () est la fonction principale et vous devez redéfinir le tableau columnDefs comme le mentionne le brentiumbrent

10
Nolic0321

J'ai également rencontré ce problème lorsque j'ai essayé de le faire en tant que service (je n'ai pas à le configurer moi-même tout le temps dont j'ai besoin).

Un morceau de mon service:

setColumns: function(columnDefs){
  $rootScope.columnDefs = columnDefs;      
  return $rootScope.columnDefs;
}

Je donne de nouveaux noms de colonne et champs dans le tableau (columnDefs) après avoir attribué de nouvelles colonnes.

0
Imants Volkovs