Angularjs 当griddata的列数与以前显示的griddata的列数不同时，如何刷新ng grid_Angularjs_Ng Grid

Angularjs 当griddata的列数与以前显示的griddata的列数不同时，如何刷新ng grid

angularjs

Angularjs 当griddata的列数与以前显示的griddata的列数不同时，如何刷新ng grid,angularjs,ng-grid,Angularjs,Ng Grid,我有一个应用程序，其中用户选择一个选项从服务器端获取网格数据，根据用户选择的选项，网格数据中的列数可能会有所不同。我使用Angularjs和ng网格来显示数据。第一次，它工作正常，显示的列数正确（例如2列）。但当用户选择其他选项（获取3列网格数据）时，ng grid仍然会考虑旧列信息，并尝试映射旧2列中的第二个3列网格数据。由于列信息不可用，我无法在控制器中使用columnDefs。如何刷新ng网格列。注意：我试图将代码放在jsFiddle（），但不知何故，我无法运行它。我的完整代码在这里另

我有一个应用程序，其中用户选择一个选项从服务器端获取网格数据，根据用户选择的选项，网格数据中的列数可能会有所不同。我使用Angularjs和ng网格来显示数据。第一次，它工作正常，显示的列数正确（例如2列）。但当用户选择其他选项（获取3列网格数据）时，ng grid仍然会考虑旧列信息，并尝试映射旧2列中的第二个3列网格数据。由于列信息不可用，我无法在控制器中使用columnDefs。如何刷新ng网格列。
注意：我试图将代码放在jsFiddle（），但不知何故，我无法运行它。我的完整代码在这里

另外：如何在ng网格中显示行而不从服务器发送

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>

css看起来像：

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 800px; 
    height: 400px;
}

尽管在ng grid中，启用ColumnResize:true（列更改后对columnDefs的更改将导致不可见的数据）无法很好地解决此问题，但在基本情况下，您可以按照

下面是一个正在工作的plunker，用您的示例演示：

您还可以调用源代码中提供的方法。在提出问题时，这可能不可用，但我自己也遇到了这个问题。如果您能够针对网格本身，您可以使用类似于这段代码的东西

scope.gridOptions.ngGrid.buildColumns();

buildColumns（）是主要函数，您需要重新定义columnDefs数组，正如brentiumbrent提到的那样

我在尝试将此作为服务时也遇到了这个问题（不必在需要时自行设置）

我的一项服务：

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

分配新列后，我会在数组（columnDefs）中指定新的列名和字段。

我会警告您，每次重新创建colDefs数组可能会非常消耗资源。Ng grid在每次初始化时执行大量间距计算。您最好改为修改“visible:true/false”参数。这里的关键是colDefs在$scope中，这就是我的不起作用的原因。我无法让它起作用，因为在更改列时，ngGrid属性仍然为null。你能告诉我你把密码放在哪里了吗？我猜你是在听某种活动然后开始的？谢谢。是的，那次函数调用是在剑道指令被捆绑后进行的。我们从页面其他地方的下拉列表中选择/取消选择列，从而调用了该函数。很抱歉这么晚才回复……我没意识到你发表了评论。

scope.gridOptions.ngGrid.buildColumns();

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