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;