Question

我一直在使用JQuery DataTables。这是我第一次使用行分组。我找到了一个我想要开始的好例子。 - Grouping

如何在分组行中添加额外的<td>？如果我想在该分组行上显示分组工资的总和，该怎么办？现在，看起来您只能显示该组的名称。

我可以将这些行折叠成Here和Here吗？看起来这是一个与原始分组代码不同的插件。 This look是我的偏好，但使用子行似乎与分组不一样。

其他信息

我将从Ajax源返回数据。

更新1

因此，我构建了一个包含行分组的表，并找到了如何总结列的this example。我将该值插入该组行中的<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。所有这些功能都已内置。

Answer 1

"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]);
    }
}

Answer 2

我已经检查了您的代码，并通过示例查看了您的指定链接。

我还检查了您的UPDATE

我发现根据您的要求，**Kendo Grids**是最佳选择。

所以我建议使用：更新3

Answer 3

在代码中查看该行..“if（last！== group）我添加了2个按钮：

expands-＆gt;调用函数'abrir'
close-＆gt;调用函数'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;
}

以下是函数'abrir'和'cerrar'我将em放在数据表脚本之外

<script>
    function abrir(group) {
        $(".collapse_"+group).collapse("show");
    }

    function cerrar(group) {
        $(".collapse_"+group).collapse("hide");
    }
</script>

然后在drawcallback之后我使用（这是线索）：

"fnRowCallback": function (nRow, aData, iDisplayIndex)
 {
   nRow.className = "collapse collapse_" + aData.LINEA;
   return nRow;
 },

我在这做什么？...对于每个简单的行添加引导类“collapse”和我自己的类collapse_ + aData.LINEA其中linea是de field，我最后分组 - ＆gt; class =“collapse collapse_MAZDA” class =“collapse collapse_BMW”

默认情况下，此元素可能会隐藏，当您操作组行上的按钮时，它将查找具有“collapse_MAZDA”AN

类的元素

JQuery DataTables - 行分组，求和，可折叠，导出

3 个答案: