关于
jquery datatables rowgrouping插件:
http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/index.html,是否可以进行两级分组,并且两个分组都可扩展/可折叠?我在网站上找不到任何提到这个的东西..想知道是否有人尝试过
解决方法
我没有看到关于插件这样做的任何事情.我认为最有效的解决方案(就运行时而言)将是修改rowGrouping插件本身,但每次创建者更新插件时可能会变得复杂(据我所知,实际上不可能扩展jQuery)插入).
无论如何,我想出了一个解决方案.它不漂亮,可以使用很多改进,但希望它至少可以激发一些想法.基本上我创建了自己的jQuery插件,它包装了rowGrouping插件(你也可以只使用中间部分 – 参见代码中的注释).它实例化一个rowGrouping dataTable,然后遍历查找每个主要组中的子组行的行.然后,它在每个子组下找到行,并为它们分配一个对该组/子组组合唯一的类.最后,它使用此类作为选择器,以在单击子组行时切换行.
// 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 }); });
希望这可以帮助.干杯.