UI-GRID 可扩展网格。以编程方式展开一行

Question

我想隐藏最左栏的+图标，再添加一个图标。

当用户单击新图标时，我想以编程方式展开该特定行。

我看到有 gridApi.expandable.expandAllRows();

有没有办法只展开一行？

Answer 1

如果您只想将默认的加号图标更改为其他图标，您只需覆盖 expandableRowHeader 的模板即可。

$templateCache.put('ui-grid/expandableRowHeader',
    "<div class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" ng-click=\"grid.api.expandable.toggleRowExpansion(row.entity)\"></i></div></div>"
  );

您可以更改 ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" 并将它们更改为您选择的不同图标。

Answer 2

您可以使用 toggleRowExpansion 函数，将此属性添加到将触发此切换的所需元素：

ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"

UI-GRID 可扩展网格。以编程方式展开一行

UI-GRID Expandable Grid. Programatically expand one row

angular-ui-grid