logo标签列表

ng-grid展开和折叠行

javascriptjqueryhtmlangularjsng-grid
7
我正在尝试为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，这不是Angular的正确方式，由于我使用了append方法，有时它可以正常工作，但有时会导致奇怪的行为。 - ninjamaster
一个可工作的fiddle会很棒！这里有一个已经加载了AngularJS的空白fiddle：http://jsfiddle.net/ddNp9/ - Alp
1
似乎ng-grid将在3.0版进行重大改进，其中包括开箱即用的隐藏/显示等功能。目前我只使用datatables，因为它已经包含了所有这些功能。感谢Alp提供的所有帮助。 - ninjamaster
@ninjamaster 如果您已经自己回答了问题，请毫不犹豫地发布并接受它。请参阅http://stackoverflow.com/help/self-answer - falsarella
2个回答
2

我从未在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 Controller: 

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], 
        }
    ]
        
}

-1

目前nggrid不支持这个功能[问题＃1111] [1]，并且它正在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样式类

.ngRow {
    position: relative !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接