ui网格一次可扩展一个

Question

例如，如果我点击行号1上的'+'号，然后点击行号2上的'+'号，行号1必须关闭，行号2必须扩大。

这一点，我已经使用了UI电网代码

<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid" ui- 
pagination> 

Answer 1

可以定义一个侦听器rowExpandedBeforeStateChanged事件，像这样：

vm.gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {

如果行已经扩大，您可以迭代所有展开的行并折叠与刚刚展开的行的hashKey不匹配的任何行。在实践中，由于这个逻辑，应该只有两个展开的行 - 先前扩展的行和最近扩展的行。

可以在rowExpandedStateChanged事件中使用的逻辑是这样的：

if (row.isExpanded) { 
     collapseAnyPreviouslyExpandedRow(); 
    } 

    function collapseAnyPreviouslyExpandedRow() { 
     var expandedRows = vm.gridApi.expandable.getExpandedRows(); 
     if (expandedRows.length > 1) { 
     angular.forEach(expandedRows, function (expandedRow, key) { 
      if (expandedRow.$$hashKey !== row.entity.$$hashKey) { 
      vm.gridApi.expandable.collapseRow(expandedRow); 
      } 
     }); 
     } 
    } 

这假定您已经使用onRegisterApi呼叫这样一个先前已分配gridApi对象到控制器：

vm.yourGridConfigObject.onRegisterApi = function (gridApi) { 
    vm.gridApi = gridApi;