在前端开发中,可以通过以下步骤来实现在选中或取消选中后单击保存按钮时切换dataTable特定列:
<table id="myTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="columnCheckbox"></td>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<!-- 其他行数据 -->
</tbody>
</table>
<button id="saveButton">保存</button>
$(document).ready(function() {
var table = $('#myTable').DataTable();
var selectedColumns = [];
// 全选/取消全选复选框的事件监听器
$('#selectAll').on('change', function() {
if ($(this).is(':checked')) {
$('.columnCheckbox').prop('checked', true);
} else {
$('.columnCheckbox').prop('checked', false);
}
});
// 单个列复选框的事件监听器
$('.columnCheckbox').on('change', function() {
var column = table.column($(this).closest('td').index() + ':visible');
var columnIndex = column.index();
if ($(this).is(':checked')) {
// 添加选中的列到数组中
selectedColumns.push(columnIndex);
} else {
// 从数组中移除取消选中的列
var index = selectedColumns.indexOf(columnIndex);
if (index > -1) {
selectedColumns.splice(index, 1);
}
}
});
// 保存按钮的点击事件监听器
$('#saveButton').on('click', function() {
// 切换选中的列的可见性
table.columns().visible(false);
for (var i = 0; i < selectedColumns.length; i++) {
table.column(selectedColumns[i]).visible(true);
}
});
});
以上代码中,首先通过$('#myTable').DataTable()
初始化了dataTable,并创建了一个空数组selectedColumns
用于保存选中的列的索引。然后,通过事件监听器来处理复选框的状态改变事件。当全选/取消全选复选框的状态改变时,通过$('.columnCheckbox').prop('checked', true/false)
来改变所有列复选框的状态。当单个列复选框的状态改变时,通过table.column().visible(true/false)
来切换选中的列的可见性。最后,当保存按钮被点击时,将选中的列设置为可见。
这样,当用户选中或取消选中复选框后,只有在点击保存按钮时,dataTable的特定列才会切换可见性。
领取专属 10元无门槛券
手把手带您无忧上云