angularjs – 当griddata与以前显示的griddata的列数不同时,如何

发布时间：2020-12-17 08:06:35 所属栏目：安全来源：网络整理

导读：我有一个应用程序，用户从服务器端选择一个选项来获取网格数据，并且取决于用户选择的选项，网格数据中的列数可能会有所不同。我使用Angularjs和ng-grid来显示数据。第一次，它工作正常，它显示正确的列数(例如2列)。但是当用户选择其他选项时，它会获得3列

我有一个应用程序，用户从服务器端选择一个选项来获取网格数据，并且取决于用户选择的选项，网格数据中的列数可能会有所不同。我使用Angularjs和ng-grid来显示数据。第一次，它工作正常，它显示正确的列数(例如2列)。但是当用户选择其他选项时，它会获得3列网格数据，ng-grid仍然会考虑旧列信息，并尝试将旧的2列的第二个3列网格数据进行映射。由于列信息不可用，我无法在控制器中使用columnDefs。如何刷新网格列。
注意：我试图把代码放在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",{name: "grid1d",age: 29},{name: "grid1e",age: 34}];

    $scope.grid2 = [{lastname: "grid2a",age: 50,state:'Idaho'},{lastname: "grid2b",age: 43,state:'NewYork'},{lastname: "grid2c",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;
}

虽然 a bug在ng网格中可以防止这个答案与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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!