我正在尝试为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>');
};
});
&#13;
<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>
&#13;
答案 0 :(得分: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控制器:
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 :(得分:-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;
}