我正在使用Datatables可折叠/可扩展分组.
http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html
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();
});
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;
}
