数据表行分组 - 如何为每组添加行数并展开/折叠所有 [英] Datatables row grouping - how to add rowcount per group and expand/collapse all

问题描述

我正在使用数据表可折叠/可扩展分组.http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

I am using Datatables Collapsible/Expandable Grouping. http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html

我已对其进行了配置，以便所有组都在初始视图中折叠.

I have configured it so that all groups collapsed in the initial view.

我真的很想在组标题中添加行数(每组的行数)，以使行分组更具信息性.它会让用户在点击展开群组时期望获得多少额外信息.

I would really like to add the rowcount (number of rows per group) in the group header to make the row grouping more informative. It would let the user how much extra information to expect when clicking to expand the group.

添加展开/折叠所有按钮也非常有用.

It would also be very useful to add expand/collapse all buttons.

谁能帮忙找到添加这些功能的方法?

Can anyone help to find away to add these features?

我已经设置了一个 jsfiddle 来展示我想要完成的任务:http://jsfiddle.net/lbriquet/4Rkb3/36/

I've set up a jsfiddle to show what I'm trying to accomplish: http://jsfiddle.net/lbriquet/4Rkb3/36/

任何帮助将不胜感激！

推荐答案

    $(document).ready(function () {
                $('#example').dataTable({
                    "bLengthChange": false,
                    "bPaginate": false,
                    "bJQueryUI": true
                }).rowGrouping({
                    bExpandableGrouping: true,
                    bExpandSingleGroup: false,
                    iExpandGroupOffset: -1,
                    asExpandedGroups: [""]
                });

                GridRowCount();
            });

            function GridRowCount() {
                $('span.rowCount-grid').remove();
                $('input.expandedOrCollapsedGroup').remove();

                $('.dataTables_wrapper').find('[id|=group-id]').each(function () {
                    var rowCount = $(this).nextUntil('[id|=group-id]').length;
                    $(this).find('td').append($('<span />', { 'class': 'rowCount-grid' }).append($('<b />', { 'text': rowCount })));
                });

                $('.dataTables_wrapper').find('.dataTables_filter').append($('<input />', { 'type': 'button', 'class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expanded All Group' }));

                $('.expandedOrCollapsedGroup').live('click', function () {
                    if ($(this).hasClass('collapsed')) {
                        $(this).addClass('expanded').removeClass('collapsed').val('Collapse All Group').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click');
                    }
                    else {
                        $(this).addClass('collapsed').removeClass('expanded').val('Expanded All Group').parents('.dataTables_wrapper').find('.expanded-group').trigger('click');
                    }
                });
            };


// ------------ Css -------------------------//
       .rowCount-grid
        {
            float: right;
            font-size: 15px;
            color: Red;
            padding-right: 250px;
        }

这篇关于数据表行分组 - 如何为每组添加行数并展开/折叠所有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！