ng-grid 展开和折叠行

Posted

技术标签:

【中文标题】ng-grid 展开和折叠行【英文标题】:ng-grid expand and collaspe row 【发布时间】:2014-06-30 06:54:21 【问题描述】:

我正在尝试为 ng-grid 实现展开和折叠行,基本上是我们在http://datatables.net/examples/api/row_details.html 所拥有的,如果您单击显示的“加号图标”更详细。

我在这里看到过类似的问题,但没有解决方案。 https://github.com/angular-ui/ng-grid/issues/517

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

感谢任何帮助。

var app = angularexpand('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) 
  $scope.myData = [
    somedata: "data to be expanded in another",
    moredata: 1
  , 
    somedata: "b data to be expanded in another",
    moredata 2
  , 
    somedata: "c data to be expanded in another",
    moredata: 3
  , 
    somedata: "d data to be expanded in another",
    moredata: 4
  , 
    somedata: "e data to be expanded in another",
    moredata: 5
  ];
  $scope.gridOptions = 
    data: 'myData'
  ;

  $scope.expandRow = function(e) 
    e.preventDefault();
    var getData = 
      somedata: '',
      moredata: ''
    ;
    $scope.gridOptions.selectItem(index, false);
    $scope.myData.splice(index + 1, 0, getData);
    $(this.row.elm).append('<div>' + this.row.entity.somedata + '</div>');
  ;
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MyCtrl">
  <div class="gridStyle" ng-grid="gridOptions"></div>
  <button ng-click="expandRow($event)">add row</button>
</body>

【问题讨论】:

我已经编辑了我的帖子,我基本上试图在一个虚拟行上附加一个 div,而不是完全有角度的方式,因为我使用附加它有时会起作用,有时它会导致特殊的行为 一个工作小提琴会很棒!这是一个加载了 angularjs 的空文件:jsfiddle.net/ddNp9 似乎 ng-grid 将对 3.0 进行重大改造,其中包括开箱即用的隐藏/显示等内容,现在我只使用已经包含所有这些功能的数据表。阿尔普感谢您的所有帮助。 @ninjamaster 如果您已经自行回答了问题,请不要犹豫发布并接受它。见***.com/help/self-answer 【参考方案1】:

我从来没有用 ng-grid 做过这个,但是,用一个普通的表格实现了这个功能。您可以编写自定义指令来解决此问题。

以下内容应该可以解决问题。此示例未在 JSFiddle 中进行测试。这里的关键是使用 'ng-repeat-start' 和 'ng-repeat-end' 而不仅仅是 'ng-repeat'。

HTML:

<div ng-controller="MyCtrl">
    <table class="table dataTable no-hover">
	<tbody>	
	    <tr ng-repeat-start="row in rows" ng-init="ind = $index"> 
		<td ng-click="rowExpanded[row.name]=!rowExpanded[row.name]"></td>
                <td ng-repeat="val in row.vals" class="column"> </td>
            </tr>
            <tr id="rowexpand" ng-show="rowExpanded[row.name]" colspan="100%" ng-repeat-end></tr>
	</tbody>
    </table>
</div>

AngularJS 控制器:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) 
    $scope.rowExpanded=[];
    
    $scope.rows= [
         "name": "row1",
         "vals" :[1, 2, 3, 4, 5], 
        ,
          "name": "row1",
         "vals" :[1, 2, 3, 4, 5], 
        
    ]
        

【讨论】:

【参考方案2】:

目前 nggrid 不支持此功能 [issue #1111][1] 并且它正在 UIGrid 3.0 版本中实现。

但是我找到了一种解决方法,这就是您可以尝试使用 rowTemplate 和一点点 jquery 在 nggrid 中实现的方法。希望这会有所帮助!

行模板

"< 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 样式类

.ngRow 
    position: relative !important;

【讨论】:

以上是关于ng-grid 展开和折叠行的主要内容,如果未能解决你的问题,请参考以下文章

展开和折叠 HTML 表数据行

SwiftUI 动画列表行的展开和折叠

Ext.Net学习笔记16:Ext.Net GridPanel 折叠/展开行

如何将展开和折叠列表行与 Core Data 元素一起使用?

具有行展开和折叠选项的表格视图的最佳方法

使用展开和折叠按钮对相同数据的 html 表行进行分组