如何使用ui-grid显示网格转发器？

Question

我有包括{id,message,date}在内的消息数据。 我想使用ui-grid在AngularJs中使用data{message}为每个日期显示一个网格

我在想这样的事情：

 <div ng-repeat="(item in data | groupBy: 'Date'"> <div>{{ item.Date }}</div> <div id="grid1" ui-grid="gridOptions(item.Date) " class="grid"></div> </div> 

但它不起作用！

  $scope.gridOptions = function (date) {
    return {
        enableSorting: true,
        enableFiltering: true,
        data: 'data',
        columnDefs: $scope.filterGrid(date),
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        },
       };
};
 $scope.filterGrid= function (date){
    return [
           { field: 'id',  enableFiltering: False},
           {
               field: 'Date', enableFiltering: false, filter: {
                   noTerm: true,
                   condition: function (searchTerm, cellValue) {
                       return cellValue.match(date);
                   }
               }
           },
           { field: 'Message' , enableFiltering: false },
    ]
}

Answer 1

ui-grid属性接收一个包含几个参数的gridOptions对象。 其中两个是：

1. columnDefs定义列及其数据绑定。
2. data -您情况下的消息对象。

查看文档以进行进一步研究： http : //ui-grid.info/docs/#/tutorial

代码示例

模板：

<div ng-repeat='item in items track by item.id' ui-grid='getItemGridOptions($index)'></div>

将项目索引传递给控制器​​使您可以处理数据。 然后，您可以返回一个包含data和columnDefs属性的对象。 像这样：

 private getItemGridOptions(index): IGridOptions {

        //get the data you need for your items array using the index...

       // then return the gridOptions object (I put random values)
        return {
            columnDefs: this.columns,
            rowHeight: 24,
            rowTemplate: rowtpl,
            enableHorizontalScrollbar: this.uiGridConstants.scrollbars.NEVER,
            enableColumnMenus: false,
            enableRowSelection: true,
            enableRowHeaderSelection: false,
            enableFiltering: true,
            modifierKeysToMultiSelect: true,
            multiSelect: true,
            data: null,
        };
    } 

Answer 2

首先-ui-grid具有分组功能 ，但这仍处于beta中。

您可以尝试使用此示例将数据分组并相应地构建网格。

 var dataSource = {};

$scope.gridOptions = {};

 var generalGridOptions = {
    enableSorting: true,
    columnDefs: [ 
      { name: 'prop1' },
      { name: 'prop2' },
    ],
    data: null
};

// group the data
for(var i = 0; i < data.length; i++){

  if(!dataSource[data[i].month]){
    dataSource[data[i].month] = [];
  }

  var obj = {};

  for(var prop in data[i]){
    if(prop!='month'){
      obj[prop] = data[i][prop];
    }
  }

  dataSource[data[i].month].push(obj);
}

// build the grid options
for (var item in dataSource) {
    $scope.gridOptions[item] = angular.copy(generalGridOptions);
    $scope.gridOptions[item].data = dataSource[item];
}