Jquery Datatables Grouping Plugin - 一种可扩展两级分组的方法?

Posted

技术标签:

【中文标题】Jquery Datatables Grouping Plugin - 一种可扩展两级分组的方法?【英文标题】:Jquery Datatables Grouping Plugin - a way to have two level grouping expandable? 【发布时间】:2011-12-10 10:19:41 【问题描述】:

关于 jquery datatables rowgrouping 插件:http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/index.html,是否可以进行两级分组,并且两个分组都可以展开/折叠?我在网站上找不到任何提及这一点的内容.. 想知道是否有人尝试过

【问题讨论】:

【参考方案1】:

我也没有看到任何关于插件这样做的信息。我认为最有效的解决方案(就运行时而言)是修改 rowGrouping 插件本身,但是每次创建者更新插件时,这可能会变得复杂(据我所知,扩展 jQuery 是不可能的)插件)。

无论如何,我想出了一个解决方案。它并不漂亮,可以进行很多改进,但希望它至少能激发一些想法。基本上,我创建了自己的 jQuery 插件,它包装了 rowGrouping 插件(您也可以单独使用中间部分 - 请参阅代码中的注释)。它实例化一个 rowGrouping 数据表,然后遍历行以查找每个主要组中的子组行。然后它在每个子组下找到行,并为它们分配一个对该组/子组组合唯一的类。最后,它使用这个类作为选择器,在单击子组行时切换行。

// 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 );
);

希望这会有所帮助。干杯。

【讨论】:

【参考方案2】:

subgroupId 的初始化应该在每次调用之前

var subgroupId = 0; // incremental Id within group
oTableGrouped.find('tbody tr td.group').each(function(index, elem) 

..
..
..

【讨论】:

【参考方案3】:

将这两个布尔值都设置为 true:

bExpandableGrouping: true
bExpandableGrouping2: true

【讨论】:

以上是关于Jquery Datatables Grouping Plugin - 一种可扩展两级分组的方法?的主要内容,如果未能解决你的问题,请参考以下文章

jquery.dataTables--插件使用方法

jQuery DataTables 仅过滤特定列

JQuery插件之Jquery.datatables.js用法及api

jquery之DataTables的使用

jquery-datatables-rails。响应式扩展和移动视图

JQuery插件datatables相关api