如何在 ui-grid table 中只扩展一行

Question

我在我的项目中使用 ui-grid。

我正在使用 ui-grid 中的 expandable 功能。

我只需要将一行设为可展开。

例如，如果我点击第 5 行的“+”号，然后点击第 2 行的“+”号，则第 5 行必须关闭，第 2 行必须展开。

知道如何在 ui-grid 中实现此行为吗？

Answer 1

您应该使用以下 api 可扩展功能：

rowExpandedStateChanged

这是展开状态更改时引发的事件，可用于拦截用户展开另一行。

toggleRowExpansion(rowEntity)

这可以在收到事件后用于关闭任何其他展开的行。

在您的代码中，您应该在 gridOptions.onRegisterApi

中添加这一行

gridApi.expandable.on.rowExpandedStateChanged(scope,function(row){})

其中 function 是一个自定义函数，您可以在其中滚动网格中的所有行，通过检查 row.isExpanded 检查它们是否展开并关闭每个展开的行（但用户刚刚展开的行，显然).

提醒一下，正如团队在网站上所说的那样，请注意可扩展功能仍处于 alpha 阶段。

Answer 2

覆盖主要功能，使 angular UI 网格力在单击 expand/collapse 底部时一次仅展开一行..

在 ui-grid.js 中搜索 "toggleRowExpansion"，然后：

toggleRowExpansion: function (rowEntity) {

// --------- COMMENT THIS LINES: ---------

// var row = grid.getRow(rowEntity);
// if (row !== null) {
// service.toggleRowExpansion(grid, row);
// }


// --------- ADD THIS LINES: ---------

var row = grid.getRow(rowEntity);
   if (row !== null) {
   var isRowExpanded = row.isExpanded || false;
   service.collapseAllRows(grid);
   if(!isRowExpanded) service.toggleRowExpansion(grid, row);
   }
}

如何在 ui-grid table 中只扩展一行

How to make expandale only one row in ui-grid table

angularjs

ng-grid

angular-ui-grid