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版本中实现。

但是我找到了一个解决方法，这就是你可以尝试使用rowTemplate和一些jquery在nggrid中实现的方法。希望这有帮助！

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;
}

展开和折叠ng-grid的行

2 个答案: