Question

如何将更改数据的数组绑定到列标题？

我看过那个样本：http://ui-grid.info/docs/#/tutorial/302_custom_header

但它只显示静态数据。

我需要将列标题绑定到日期对象数组。

Answer 1

可以将网格数据配置为观察范围变量。以下是从服务器调用加载数据的示例。

  angular.module('app', ['ngGrid'])
  .controller('GridCtrl', function($scope, $http){
    var grid = this;

    grid.exampleGrid = {
        enableCellSelection: false,
        enableRowSelection: false,
        enableCellEdit: false,
        enableColumnResize: true,
        enableColumnReordering: true,
        data: 'gridData',
    };

    $http.get('/some/data/source').success(function(data){
      $scope.gridData = data
    });
  });

服务器返回json

[
   {
         "Name": "Greg",
         "Date": 0
      },
   {
         "Name": "Marly",
         "Date": 7
      },
   {
         "Name": "Frank",
         "Date": 4
      }
]

使用视图

    <div ng-app="app">
      <div ng-controller="GridCtrl as grid">
        <div class="gridStyle" ng-grid="grid.exampleGrid"></div>
      </div>
    </div>

正在工作plunkr

修改

更新了我的回答，以反映您所做的澄清。如果json跟随，ngGrid将自动将json对象键分配给表头给定的结构。

也更新了plunkr。

如果您无法控制来自服务器的数据结构，则可以进行修改它到结构。

或者，可以将grid.exampleGrid.columnDefs设置为观察单独的范围变量，您可以根据传入数据构建该变量。

将动态数组绑定到列标题

1 个答案: