web-dev-qa-db-ja.com

griddataに以前に表示されたgriddataと異なる列数がある場合にng-gridを更新する方法

ユーザーがサーバー側からグリッドデータを取得するオプションを選択し、ユーザーが選択したオプションに依存するアプリケーションがあります。グリッドデータの列の数は異なる場合があります。 Angularjsとng-gridを使用してデータを表示しています。初回は正常に動作し、正しい数の列（2列など）が表示されます。しかし、ユーザーが3列のグリッドデータを取得する他のオプションを選択すると、ng-gridは古い列情報を考慮し、2番目の3列のグリッドデータを古い2列にマッピングしようとします。列情報が利用できないため、コントローラーでcolumnDefsを使用できません。 ng-grid列を更新するにはどうすればよいですか。
注：私はjsFiddle（ http://jsfiddle.net/User888/pwUeX/11/ ）にコードを配置しようとしましたが、どういうわけか、それを実行できません。私の完全なコードはここにあります。

また：サーバーから送信せずにng-gridで行番号を表示するにはどうすればよいですか？.

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>

私のコントローラーは：

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;
}
angularjsng-grid
16
Ajay Kumar

Ng-gridの バグ は、enableColumnResize：true（列の変更後にcolumnDefsを変更するとデータが表示されなくなる）でこの回答がうまく機能しなくなりますが、基本的な状況では、

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

これがあなたの例でそれを実証する作業用プランカーです： http://plnkr.co/edit/w1DLtS

8
brentiumbrent

また、ソースコードで提供されるメソッドを呼び出すこともできます。これは質問の時に利用できなかったかもしれませんが、私は自分で問題に遭遇しました。グリッド自体をターゲットにできる場合は、このコードに似たものを使用できます

scope.gridOptions.ngGrid.buildColumns();

buildColumns（）は主要な関数であり、brentiumbrentが言及したようにcolumnDefs配列を再定義する必要があります

10
Nolic0321

これをサービスとして作成しようとしたときにも、この問題に遭遇しました（必要なときに自分で設定する必要はありません）。

私のサービスの一部：

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

新しい列を割り当てた後、新しい列の名前とフィールドを配列（columnDefs）に指定します。

0
Imants Volkovs