ng网格展开和折叠行

Question

我试图实现ng-grid的展开和折叠行。

基本上我们必须做的，如果你点击一行显示更多的细节。

有谁知道如何做到这一点？

任何帮助表示赞赏。

Answer 1

快速而肮脏的例子。这不是特定于ngGrid，但我相信这个概念应该继续。 （如果没有，请随时向我喊:)）

<div class="row" ng-repeat-start="item in items" ng-click="item.expanded = !item.expanded"></div> 

<div class="row-details" ng-if="item.expanded"></div> 

Answer 2

目前nggrid不支持此功能issue #1111及其UIGrid 3.0版本中实现。

但我发现了一个解决方法，这是你可以尝试在nggrid中使用rowTemplate和一点jQuery来实现的。希望这可以帮助！

rowTemplate：

<div class="row"> 
// add column data 
// expand or collapse image 
    <div class=\"col-xs-1 col-md-1\"><img "id='showHide_{{row.rowIndex}}' ng-src='src/img/{{imgArrowRight}}' ng-click=\"rowExpand (row.rowIndex);\"/></div> 
</div> 

<div id='expRowId_{{row.rowIndex}}' style=\"display:none;\">< div class=\"expData\">< span ng-bind=\"row.entity.Attr\">< /span> 
    //add whatever you want in the expanded row.< /div>< /div> 
    //Defined customArray for handling dynamic row Toggle 

    angular.forEach($scope.gridData, function(row,index) { 
     $scope.customArray[index] = true; 
    }); 

    //row expand code 

    $scope.rowExpand = function(index){ 
     $scope.customArray[index] = $scope.customArray[index] === false ? true : false; 

     if($scope.customArray[index]){ 
      $('#showHide_'+index).attr('src','src/assets/img/rigthIcon.gif'); 
      $('#expRowId_'+index).hide(); 
     }else{ 
      $('#showHide_'+index).attr('src','src/assets/img/downIcon.gif'); 
      $('#expRowId_'+index).show(); 
     } 
    } 

而且覆盖ngRow的styleClass

.ngRow { 
    position: relative !important; 
}