如何使 Angular ui 网格最初展开所有行？

Question

我正在使用 ui 网格来显示数据列表，并且我正在尝试首先展开所有行。

我正在尝试在 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) => 
            {
                scope.gridApi = gridApi;
                gridApi.expandable.on.rowExpandedStateChanged(scope,(row) =>
                {
                    if (row.isExpanded) {
                        this.scope.GridOptions.expandableRowScope = row.entity;
                    }
                });
                gridApi.expandable.expandAllRows();

            }
        };

但是上面的代码不起作用。看起来当我调用 expandAllRows() 时，行还没有呈现。

Answer 1

我发现我可以使用 rowsRendered 事件展开所有行：

gridApi.core.on.rowsRendered(scope,() => {
        if (!gridApi.grid.expandable.expandedAll && !initialized)
        {
            gridApi.expandable.expandAllRows();
            initialized = true;
         }
});

我使用了一个初始化的变量来识别这是否是第一次呈现行，因为我最初只想展开所有行。

Answer 2

就我而言，以下方法有效：

    $scope.gridOptions = {
      ...
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });
      }
    };

Answer 3

以上的

None 适用于我所有的网格用例。

        $scope.gridApi.grid.registerDataChangeCallback(function() {
            if($scope.gridApi.grid.treeBase.tree instanceof Array){
                $scope.gridApi.treeBase.expandAllRows();
            }

        });

以下在我测试过的每种情况下都有效。 DataChangeCallback 在初始页面加载时被调用两次（出于某种未知原因）。第一次，gridApi.grid.treeBase.tree 是一个导致 gridApi.grid.treeBase.tree.forEach 问题的对象：

Answer 4

None 这些答案对我有用，以下答案：

scope.gridApi.core.on.rowsRendered(null, () => {
    scope.gridApi.treeBase.expandAllRows();
});

如何使 Angular ui 网格最初展开所有行？

How to make Angular ui grid expand all rows initially?

angularjs

angular-ui

angular-ui-grid