带有复选框的数据表可折叠行组
Posted
技术标签:
【中文标题】带有复选框的数据表可折叠行组【英文标题】：Datatable Collapsible RowGroup with checkboxes 【发布时间】：2021-12-21 07:36:56 【问题描述】：我对数据表不是很熟悉。事实上，在过去的几周里，我刚刚开始学习使用它。 我需要开发一个带有复选框的可折叠\可扩展行组的数据表。
以下示例实现了我所需要的，除了行组（或显示每个城市下的总行数的标题）不可折叠\可扩展。
https://jsfiddle.net/gyrocode/2b0revo8/
$(document).ready(function ()
var table = $('#example').DataTable(
'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
'orderFixed': [3, 'asc'],
'rowGroup':
'dataSrc': 'office',
'startRender': function(rows, group)
// Assign class name to all child rows
var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
var rowNodes = rows.nodes();
rowNodes.to$().addClass(groupName);
// Get selected checkboxes
var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);
// Parent checkbox is selected when all child checkboxes are selected
var isSelected = (checkboxesSelected.length == rowNodes.length);
return '<label><input type="checkbox" class="group-checkbox" data-group-name="'
+ groupName + '"' + (isSelected ? ' checked' : '') +'> ' + group + ' (' + rows.count() + ')</label>';
,
'columns': [
'data': 'id',
'checkboxes':
'selectRow': true
,
'data': 'name' ,
'data': 'position' ,
'data': 'office' ,
'data': 'salary'
],
'select':
'style': 'multi'
,
'order': [[2, 'asc']]
);
// Handle click event on group checkbox
$('#example').on('click', '.group-checkbox', function(e)
// Get group class name
var groupName = $(this).data('group-name');
// Select all child rows
table.cells('tr.' + groupName, 0).checkboxes.select(this.checked);
);
// Handle click event on "Select all" checkbox
$('#example').on('click', 'thead .dt-checkboxes-select-all', function(e)
var $selectAll = $('input[type="checkbox"]', this);
setTimeout(function()
// Select group checkbox based on "Select all" checkbox state
$('.group-checkbox').prop('checked', $selectAll.prop('checked'));
, 0);
);
); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.css" rel="stylesheet"/>
<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup/">RowGroup</a></h3>
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup//">See full article on Gyrocode.com</a>最好在页面加载时折叠行组。还应该可以同时扩展几个行组。
你知道如何实现吗？
【问题讨论】：
【参考方案1】：您必须在 tr 单击时调用切换事件，并且需要在组或 tr 上应用折叠 在这里，我更新了您的 tr 折叠组的代码
$('#example').on('click', '.group-checkbox', function(e)
// Get group class name
var groupName = $(this).data('group-name');
var collapsed = !!collapsedGroups[groupName];
collapsedGroups[groupName] = !collapsedGroups[groupName];
// Select all child rows
table.cells('tr.' + groupName, 0).checkboxes.select(this.checked)
$(this).toggleClass('collapsed', collapsed);
table.draw(false);
);
这是一个工作演示，如果需要任何更新，您可以要求我希望它对您有所帮助。
$(document).ready(function ()
var collapsedGroups = ;
var table = $('#example').DataTable(
'ajax': 'https://gyrocode.github.io/files/jquery-datatables/objects.json',
'orderFixed': [3, 'asc'],
'rowGroup':
'dataSrc': 'office',
'startRender': function(rows, group)
// Assign class name to all child rows
var groupName = 'group-' + group.replace(/[^A-Za-z0-9]/g, '');
var collapsed = !!collapsedGroups[groupName];
var rowNodes = rows.nodes();
rowNodes.to$().addClass(groupName);
rowNodes.each(function (r)
r.style.display = collapsed ? 'none' : '';
);
// Get selected checkboxes
var checkboxesSelected = $('.dt-checkboxes:checked', rowNodes);
// Parent checkbox is selected when all child checkboxes are selected
var isSelected = (checkboxesSelected.length == rowNodes.length);
// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append('<td colspan="8"><label><input type="checkbox" class="group-checkbox" data-group-name="'
+ groupName + '"' + (isSelected ? ' checked' : '') +'> ' + groupName + ' (' + rows.count() + ')</label></td>')
.attr('data-name', groupName)
.toggleClass('collapsed', collapsed);
,
'columns': [
'data': 'id',
'checkboxes':
'selectRow': true
,
'data': 'name' ,
'data': 'position' ,
'data': 'office' ,
'data': 'salary'
],
'select':
'style': 'multi'
,
'order': [[2, 'asc']]
);
// Handle click event on group checkbox
$('#example').on('click', '.group-checkbox', function(e)
// Get group class name
var groupName = $(this).data('group-name');
var collapsed = !!collapsedGroups[groupName];
collapsedGroups[groupName] = !collapsedGroups[groupName];
// Select all child rows
table.cells('tr.' + groupName, 0).checkboxes.select(this.checked)
$(this).toggleClass('collapsed', collapsed);
table.draw(false);
);
// Handle click event on "Select all" checkbox
$('#example').on('click', 'thead .dt-checkboxes-select-all', function(e)
var $selectAll = $('input[type="checkbox"]', this);
setTimeout(function()
// Select group checkbox based on "Select all" checkbox state
$('.group-checkbox').prop('checked', $selectAll.prop('checked'));
, 0);
);
); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/rg-1.0.2/sl-1.2.4/datatables.min.css" rel="stylesheet"/>
<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup/">RowGroup</a></h3>
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/rowgroup//">See full article on Gyrocode.com</a>【讨论】：
这很好用。它让我接近预期的结果。通过单击标题行中的复选框，我失去了选择所有子行的能力。也许，在标题的复选框旁边添加 + 和 - 按钮会很有用，这将允许展开或折叠组。甚至是表格顶部的 Expand\Collapse 按钮，可以一次展开或折叠所有组。 感谢@Rod，您可以这样做还是需要任何帮助？以上是关于带有复选框的数据表可折叠行组的主要内容，如果未能解决你的问题，请参考以下文章