如何使 Angular ui 网格最初根据数据扩展行？

Question

我正在使用 ui-grid 来显示数据列表，在显示网格时我正在尝试根据数据扩展一些行。

我正尝试在 onRegisterApi 事件中这样做：

scope.GridOptions = {
    data: properties,
    columnDefs: 
    [
        { name: "Full Address", field: "FullAddress" },
        { name: "Suburb", field: "Suburb" },
        { name: "Property Type", field: "PropertyType" },
        { name: "Price", field: "Price", cellFilter: 'currency'},
        { name: "Status", field: "Status" },
        { name: "Sale Type", field: "SaleType" }, 
        { name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
    ],
    expandableRowTemplate: 'template.html',
    expandableRowHeight: 200,
    onRegisterApi: (gridApi) => 
    {
        gridApi.expandable.expandAllRows();
    }
};

问题是 gridApi.expandable.expandAllRows() 展开了所有分组部分。我看到有一个 expandRow function, but I am not sure how to use it in place of the expandAllRows 函数。我真的很想扩展将列 Status 设置为特定值的组。有人可以帮我解决这个问题吗？

Answer 1

这是一种处理选择性行扩展的方法。我创建了一个 Plunker link (http://plnkr.co/edit/CSaROQqKxYnkoxm2Tl6b?p=preview)，我在其中展开所有偶数行。以类似的方式，您可以遍历数组并展开所需的行。

包括：
控制器中的“$timeout”依赖项

展开第一行：

$timeout(function() {
    var rows = $scope.gridApi.grid.rows;
    var entity = (rows.length && rows[0]) ? rows[0].entity : null;
    $scope.gridApi.expandable.toggleRowExpansion(entity);
  });

Answer 2

可能是我回答晚了。但它可能会对其他人有所帮助。

我采用了与 SaiGiridhar 发布的相同的 plunker 示例，但进行了修改

$timeout(function() {
    var rows = $scope.gridApi.grid.rows;
    for(var i=0; i < rows.length; i++){
      if(i%2 === 0){
        var entity = (rows.length && rows[i]) ? rows[i].entity : null;
        $scope.gridApi.expandable.toggleRowExpansion(entity);
      }
    }
});

至

$scope.$$postDigest(function() {
    var rows = $scope.gridApi.grid.rows;
    for(var i=0; i < rows.length; i++){
      if(i%2 === 0){
        var entity = (rows.length && rows[i]) ? rows[i].entity : null;
        $scope.gridApi.expandable.toggleRowExpansion(entity);
      }
    }
});

如何使 Angular ui 网格最初根据数据扩展行？

How to make Angular ui grid expand rows initially based on data?

javascript

angularjs

angular-ui-grid