NG-电网扩大和collaspe行 [英] ng-grid expand and collaspe row
问题描述
我想实现NG网的展开和折叠行，基本上就是我们这里有 http://datatables.net/examples/api/row_details.html 如果你点击加号图标你有更详细的显示。
我已经看到了类似的问题在这里问，但没有解决方案。 https://github.com/angular-ui/ng-grid/issues/517
有谁知道如何实现这一目标？
任何帮助是AP preciated。
VAR应用= angularexpand（'对myApp'，['ngGrid']）;\r
app.controller（'MyCtrl'，函数（$范围）{\r
$ scope.myData = [{\r
somedata：数据到另一个扩展，\r
MOREDATA：1\r
}，{\r
somedata：B数据到另一个扩展，\r
2 MOREDATA\r
}，{\r
somedata：C数据到另一个扩展，\r
MOREDATA：3\r
}，{\r
somedata：D数据到另一个扩展，\r
MOREDATA：4\r
}，{\r
somedata：电子数据到另一个扩展\r
MOREDATA：5\r
}];\r
$ scope.gridOptions = {\r
数据：myData的\r
};\r
\r
$ scope.expandRow =功能（E）{\r
亦即preventDefault（）;\r
VAR的getData = {\r
somedata：''，\r
MOREDATA：''\r
};\r
$ scope.gridOptions.selectItem（索引，FALSE）;\r
$ scope.myData.splice（指数+1，0，的getData）;\r
$（this.row.elm）.append（'＆LT; DIV＆GT;'+ this.row.entity.somedata +'＆LT; / DIV＆GT;'）;\r
};\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;机身NG控制器=MyCtrl＆GT;\r
＆LT; DIV CLASS =gridStyleNG格=gridOptions＆GT;＆LT; / DIV＆GT;\r
＆LT;按钮NG点击=expandRow（$事件）＆gt;添加一行＆LT; /按钮＆GT;\r
＆LT; /身体GT; \r
我从来没有与NG网做到了这一点，但是，已经实现了这个功能与常规表。你可以写一个自定义的指令解决这个问题。
沿东西线下方应该做的伎俩。这个例子是不是在测试的jsfiddle。这里的关键是使用'NG重复启动'和'NG-重复端，而不仅仅是NG重复。
HTML
＆LT; DIV NG控制器=MyCtrl＆GT;\r
＆LT;表类=表dataTable的无悬停＆GT;\r
＆LT;＆TBODY GT;\r
＆LT; TR NG-重复启动=行排NG-的init =IND = $指数＆GT;\r
＆LT; TD NG点击=rowExpanded [row.name] = rowExpanded [row.name]！＆GT;＆LT; / TD＆GT;\r
＆LT; TD NG重复=VAL在row.vals级=列＆GT; ＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; TR ID =rowexpandNG-秀=rowExpanded [row.name]合并单元格=100％NG-重复端＆GT;＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT; \r
AngularJS控制器：
VAR对myApp = angular.module（'对myApp'，[]）;\r
\r
功能MyCtrl（$范围）{\r
$ scope.rowExpanded = [];\r
\r
$ scope.rows = [\r
{名：ROW1\r
瓦尔斯：[1，2，3，4，5]，\r
}，\r
{名：ROW1\r
瓦尔斯：[1，2，3，4，5]，\r
}\r
]\r
\r
} \r
I am trying to achieve an expand and collapse row for ng-grid, basically what we have here http://datatables.net/examples/api/row_details.html if you click the "plus icon" your displayed with more detail.
I have seen a similar question asked here but no solution. https://github.com/angular-ui/ng-grid/issues/517
Does anyone know how to achieve this?
Any help is appreciated.
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>
I have never done this with ng-grid, however, have achieved this functionality with a regular table. You could write a custom directive to solve this.
Something along the lines below should do the trick. This example was NOT tested in JSFiddle. The key here is using 'ng-repeat-start' and 'ng-repeat-end' instead of just '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],
}
]
}
这篇关于NG-电网扩大和collaspe行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
