Плагин Jquery Datatables Grouping - способ расширения двухуровневой группировки? - PullRequest
4 голосов
/ 19 октября 2011

Что касается плагина для группировки строк jquery datatables: http://jquery -datatables-row-grouping.googlecode.com / svn / trunk / index.html , возможно ли иметь двухуровневую группировку, а также есть ли обе группы расширяемые / складные? Я не смог найти ничего на сайте, упоминающего это .. интересно, если кто-нибудь пробовал это

Ответы [ 3 ]

4 голосов
/ 22 февраля 2012

Я тоже ничего не видел, чтобы плагин делал это.Я думаю, что наиболее эффективным решением (с точки зрения времени выполнения) было бы изменить сам плагин 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 });
});

Надеюсь, это поможет.Приветствия.

0 голосов
/ 23 декабря 2014

инициализация subgroupId должна быть перед каждым вызовом

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

..
..
..
}
0 голосов
/ 28 августа 2012

Установите для обоих этих логических значений значение true:

bExpandableGrouping: true
bExpandableGrouping2: true
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...