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

问题描述

我正在使用Datatables可折叠/展开式分组。
http：// jquery-datatables-row-grouping .googlecode.com / svn / trunk / collapsibleGroups.html

我已配置它，以便所有组在初始视图中折叠。

我希望在组头中添加rowcount（每组的行数），以使行分组更加翔实。它将让用户点击展开该组时需要多少额外的信息。

添加展开/折叠所有按钮也将非常有用。 >

任何人都可以帮助找到添加这些功能？

我已经设置了一个jsfiddle来显示我'试图完成：
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（）; 
}）; 
 
函数GridRowCount（）{
 $（'span.rowCount-grid'）。remove（）; 
 $（'input.expandedOrCollapsedGroup'）。remove（）; $（$（$）
 $（'。dataTables_wrapper'）。find（'[id | = group-id]'）each（function（）{
 var rowCount = $（this）.nextUntil '（''''''''''）。 -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'））{
 $ （这个）.addClass（'expanded'）。removeClass（'collapsed'）。val（'Collapse All Group'）。parents（'。dataTables_wrapper'）。find（'。collapsed-group'）。 ）; 
} 
 else {
 $（this）.addClass（'collapsed'）。removeClass（'expanded'）。val（'Expanded All Group'）父（'。dataTables_wrapper '）.find（'。expanded-group'）。trigger（'click'）; 
} 
}）; 
}; 
 
 
 // ------------ Css ----------------------- -  // 
 .rowCount-grid 
 {
 float：right; 
 font-size：15px; 
颜色：红色; 
 padding-right：250px; 
} 
  

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?

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

Any help would be really appreciated!

解决方案

    $(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;
        }

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