如何在griddata與先前顯示的griddata具有不同列數的情況下刷新ng-grid

我確實有一個應用程序，用戶在其中選擇一個選項以從服務器端獲取網格數據，並取決於用戶選擇的選項，網格數據可能不同。我正在使用Angularjs和ng-grid來顯示數據。第一次，它工作正常，它顯示正確的列數（例如2列）。但是當用戶選擇其他選項時，獲得3列grid-data，ng-grid仍然會考慮舊列信息，並嘗試將舊的2列中的第二個3-cols網格數據映射。由於列信息不可用，因此我無法在控制器中使用columnDefs。我如何刷新ng-grid列。
注：我試圖把代碼放在jsFiddle（http://jsfiddle.net/User888/pwUeX/11/），但不知何故，我無法運行它。我的完整代碼在這裏。如何在griddata與先前顯示的griddata具有不同列數的情況下刷新ng-grid

另外：如何在不從服務器發送的情況下在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; 
}

來源

2013-06-24 Ajay Kumar

儘管在NG-電網a bug防止這個答案從enableColumnResize正常工作：真（更改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 
};

這裏的工作plunker你的榜樣證明它： http://plnkr.co/edit/w1DLtS

來源

2013-07-10 20:16:32 brentiumbrent

我會警告每次重新創建colDefs數組可能會非常耗費資源。 Ng網格在每次初始化時執行大量的間距計算。相反，您可能會更好地修改「visible：true/false」參數。 – Clev3r

你也可以調用在源代碼中提供的方法。這在問題發生時可能還沒有提供，但我自己也遇到了這個問題。如果你能夠針對網格本身就可以使用類似的東西來這段代碼

scope.gridOptions.ngGrid.buildColumns();

buildColumns（）是主要的功能，你需要重新定義columnDefs陣列brentiumbrent提到

來源

2013-12-31 16:50:44 Nolic0321

我無法得到這個工作，因爲在改變我的列的ngGrid屬性仍然爲空。你能告訴我你在哪裏放置代碼嗎？我猜你正在聽某種事件然後踢開它？謝謝。 – PRB

是的，那個函數調用是在kendo指令可能受到束縛之後進行的。我們稱之爲從位於頁面其他位置的下拉列表中選擇/取消選擇列的結果。對不起，這麼晚迴應..沒有意識到你發表了評論。 – Nolic0321

我當我嘗試將它作爲服務時也遇到了這個問題（不必一直需要我自己設置它）。

我的一塊業務：

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

我給新的列名和字段陣列（columnDefs）後，我分配新列。

來源

2014-08-25 11:16:54

如何在griddata與先前顯示的griddata具有不同列數的情況下刷新ng-grid

回答

相關問題