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对象。其中两个是：

columnDefs - 定义列及其数据绑定。
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有一个grouping feature，但这仍处于测试阶段。

您可以尝试使用this example对数据进行分组并相应地构建网格。

 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];
}

如何使用ui-grid显示网格中继器？

2 个答案: