我已经使用JQuery DataTables很长时间了。这是我第一次进行行分组。我找到了一个我想从哪里开始的好例子。-分组
- 如何
<td>
在分组行中添加额外内容?如果我想在该分组行上显示分组工资的总和怎么办?现在,您似乎只能显示组的名称。
附加信息
我将从Ajax源返回数据。
更新1
因此,我用行分组构建了一个表,并找到了如何汇总列的此示例。我将该值插入<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;
}
});
}
更新2
在我看来,DataTables不能提供我需要的所有功能。行分组没有内置的小计或可折叠性。即使我能够创建自定义内容来执行此操作,看起来在导出过程中也不会拾取这些组行,这是我需要的另一个要求。我可能不得不走另一条路。除非有人能够满足所有这些需求,否则不要打扰。
更新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]);
}
}
我已经检查了您的代码,并查看了示例的给定链接。
我也检查过你 UPDATE
我发现,**Kendo Grids**
根据您的要求,这是最好的选择。
所以我建议使用:UPDATE 3
在您的代码中检出该行。“”如果(最后一个!==组)我添加了2个按钮:
- expands-> calls函数'abrir'
- close->调用函数“ cerrar”
两者都以组元素为例:“ MAZDA”,“ TOYOTA”,“ BMW”
if (last !== group)
{
groupid++;
alert(group);
$(rows).eq(i).before(
'<tr class="group father_' + group + ' text-right"><td class="text-left"><text class="order">'
+ group +
'</text>'+
' <i class="fa fa-plus-square-o" aria-hidden="true" btn btn-default btn-xs" onclick="abrir(\''+group+'\')">'+
' <i class="fa fa-minus-square-o aria-hidden="true" btn btn-default btn-xs" onclick="cerrar(\''+group+'\')">'+
'</td></tr>');
last = group;
}
这是我将它们放在datatables脚本之外的函数'abrir'和'cerrar'
<script>
function abrir(group) {
$(".collapse_"+group).collapse("show");
}
function cerrar(group) {
$(".collapse_"+group).collapse("hide");
}
</script>
然后在回调调用后使用(这是线索):
"fnRowCallback": function (nRow, aData, iDisplayIndex)
{
nRow.className = "collapse collapse_" + aData.LINEA;
return nRow;
},
我在这里做什么?...为每个简单的行添加引导程序类“ collapse”和我自己的类crash_ + aData.LINEA,其中linea是由Im分组的字段,所以最后-> class =“ collapse crash_MAZDA” class =“塌塌塌_宝马“
默认情况下,此元素可能是隐藏的,当您操作组行上的按钮时,它将查找具有“ collapse_MAZDA”类的元素
本文地址:http://jquery.askforanswer.com/jqueryshujubiao-xingfenzuzonghekezhediedaochu.html
文章标签:datatables , javascript , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
文章标签:datatables , javascript , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!