我已经使用 JQuery DataTables 很长时间了。这是我第一次使用行分组。我找到了一个很好的例子来说明我想从哪里开始。 -Grouping http://www.cscc.edu/_resources/app-data/datatables/examples/advanced_init/row_grouping.html
- 我该如何添加额外的
<td>到分组行？如果我想在该分组行上显示分组工资的总和该怎么办？目前，您似乎只能显示组的名称。
- 我可以让这些行像它们一样可折叠吗Here https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html and Here http://jsfiddle.net/nanoquantumtech/RgKPZ/？看起来这是一个与原始分组代码不同的插件。这个样子 https://datatables.net/examples/api/row_details.html将是我的偏好，但处理子行似乎与分组不同。
附加信息
我将从 Ajax 源返回数据。
UPDATE 1
所以，我建立了一个带有行分组的表并发现这个例子 http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html如何总结一列。我将该值插入<td>在该组行中。我现在需要的是如何将该总金额分解为各组，而不是整个列的总和。我需要这方面的帮助。
"drawCallback": function (settings) {
var api = this.api(), data;
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
//Calculates the total of the column
var total = api
.column(5) //the salary column
.data()
.reduce(function (a, b) {
return a + b;
}, 0);
//Groups the Office column
api.column(2, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td>' + group
+ '</td><td></td><td></td><td></td><td>'
+ total + '</td></tr>'
);
last = group;
}
});
}
UPDATE 2
在我看来，DataTables 无法提供我需要的所有功能。
行分组没有内置的小计或折叠功能。即使我能够创建一些自定义的东西来做到这一点，看起来这些组行在导出期间不会被拾取，这是我需要的另一个要求。我可能不得不走另一条路。除非有人能够满足所有这些需求，否则不要打扰。
UPDATE 3
我决定改用 Kendo Grids。所有这些功能都已内置。
"drawCallback": function ( settings ) {
var api = this.api(),data;
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
total=new Array();
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
group_assoc=group.replace(' ',"_");
if(typeof total[group_assoc] != 'undefined'){
total[group_assoc]=total[group_assoc]+intVal(api.column(5).data()[i]);
}else{
total[group_assoc]=intVal(api.column(5).data()[i]);
}
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="4">'+group+'</td><td class="'+group_assoc+'"></td></tr>'
);
last = group;
}
} );
for(var key in total) {
$("."+key).html("$"+total[key]);
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
