Jquery数据表分组插件-一种两级分组可扩展的方法?
关于jquery datatables rowgrouping插件:,是否可以有两级分组,并且两个分组都可以展开/折叠?我在网站上找不到任何提到这一点的东西。。想知道是否有人尝试过它我也没有看到关于插件这样做的任何信息。我认为最有效的解决方案(就运行时而言)是修改rowGrouping插件本身,但这可能会在每次创建者更新插件时变得复杂(据我所知,扩展jQuery插件是不可能的) 不管怎样,我想出了一个解决办法。它并不漂亮,而且可能需要很多改进,但希望它至少能激发一些想法。基本上,我创建了自己的jQuery插件来包装行分组插件(您也可以单独使用中间部分-请参阅代码中的注释)。它实例化一个rowGrouping数据表,然后遍历行,在每个主组中查找子组行。然后,它在每个子组下查找行,并为它们分配一个组/子组组合所特有的类。最后,它使用该类作为选择器,在单击子组行时切换行Jquery数据表分组插件-一种两级分组可扩展的方法?,jquery,jquery-plugins,datatables,Jquery,Jquery Plugins,Datatables,关于jquery datatables rowgrouping插件:,是否可以有两级分组,并且两个分组都可以展开/折叠?我在网站上找不到任何提到这一点的东西。。想知道是否有人尝试过它我也没有看到关于插件这样做的任何信息。我认为最有效的解决方案(就运行时而言)是修改rowGrouping插件本身,但这可能会在每次创建者更新插件时变得复杂(据我所知,扩展jQuery插件是不可能的) 不管怎样,我想出了一个解决办法。它并不漂亮,而且可能需要很多改进,但希望它至少能激发一些想法。基本上,我创建了自己的j
// create our own jQuery plugin that wraps rowGrouping
(function ($) {
$.fn.rowGroupingWithColapsableSecondLevel = function (options) {
return this.each(function (index, elem) {
// construct a rowGrouping object
var oTableGrouped = $(elem).dataTable().rowGrouping(options);
// subgroup row/tds are not uniquely identified
// find each group row (identified by it's td having the class .group) and identify it (via a unique class per subgroup) and bind a click to the subgroup row that will toggle this class
// SIDE NOTE: if you don't want to use the plugin wrapping method, just isolate the following "find" block and replace oTableGroup with a reference to the table object (or create an object or function with the find block)
// example: var myTable = $('#example').dataTable().rowGrouping(); // then use myTable.find... below
oTableGrouped.find('tbody tr td.group').each(function(index, elem) {
var groupName = $(elem).attr('rel'); // e.g., group-1
var tr = $(elem).parent();
var subgroupId = 0; // incremental Id within group
// go through subsequent rows looking for subgroups until we hit another major group (or run out of rows)
do {
var tr = tr.next('tr'); // get the next row
if (tr.find('td').hasClass('subgroup')) {
// this is a subgroup row
subgroupId ++;
// give this subgroup an id so we can work with it
tr.attr('id', groupName + '-subgroup-' + subgroupId);
// assign parent group id as class so it will be toggled with other rows
tr.addClass('group-item-' + groupName);
// assign a toggle function
tr.click( function() {
$('.' + $(this).attr('id')).toggle();
});
} else if(tr.find('td').hasClass('group')) {
// we've reached the next group, exit the do loop (the next group will be picked up by the next oTableGroup.find)
break;
} else if(tr.length == 1) {
// this is a row under the subgroup, identify it by adding a class
tr.addClass(groupName + '-subgroup-' + subgroupId);
}
} while (tr.length == 1);
}); // end of the find block
return oTableGrouped;
})
};
})(jQuery);
下面是您将如何使用它:
$(function() {
var oTable = $('#example').dataTable({ "bLengthChange": false, "bPaginate": false}).rowGroupingWithColapsableSecondLevel({ "iGroupingColumnIndex2": 1 , "bExpandableGrouping": true });
});
希望这有帮助。干杯。将这两个布尔值设置为真:
bExpandableGrouping: true
bExpandableGrouping2: true
SUBSUBID的初始化应在每次调用之前进行
var subgroupId = 0; // incremental Id within group
oTableGrouped.find('tbody tr td.group').each(function(index, elem) {
..
..
..
}