如何使角UI电网展开所有行开始？ [英] How to make Angular ui grid expand all rows initially?

问题描述

我使用的UI表格显示的数据列表，我想最初展开所有行。

I am using ui grid to show a list of data and I am trying to initially expand all rows.

我试图做到这一点的onRegisterApi事件：

I am trying to do this in the onRegisterApi event:

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();

            }
        };

不过，code以上不起作用。它看起来像当我打电话expandAllRows（）的行尚未呈现。

But the code above does not work. It looks like when I call expandAllRows() the rows are not rendered yet.

推荐答案

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

I find I can expand all rows by using rowsRendered event:

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

我已经使用初始化来标识，如果这是第一次的行呈现为我只想最初展开的所有行的变量。

I have used a variable initialized to identify if this is the first time rows are rendered as I only want to expand all rows initially.

这篇关于如何使角UI电网展开所有行开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！