如果想要在bootstrap table中加入多选框并且保留在分页时的选定状态,可以按照以下步骤进行操作:
- 首先要在table的html代码中加入一个input元素作为多选框,示例代码如下:
```
姓名 | 性别 | 年龄 | 城市 | |
---|---|---|---|---|
张三 | 男 | 28 | 北京 | |
李四 | 女 | 25 | 上海 | |
王五 | 男 | 30 | 广州 |
```
其中,第一个th元素中的input元素作为全选多选框,后面的每个tr元素中的input元素作为每行的多选框。
- 接下来要在jquery代码中实现多选框的选定状态在分页时的保留。示例代码如下:
```
$(document).ready(function() {
// 全选多选框的点击事件
$('#selectAll').click(function(event) {
if (this.checked) {
$('.checkbox').each(function() {
this.checked = true;
});
} else {
$('.checkbox').each(function() {
this.checked = false;
});
}
});
// 每行多选框的点击事件
$('.checkbox').click(function(event) {
if (!this.checked) {
$('#selectAll').prop('checked', false);
}
});
// 翻页时保留选定状态
$('#example-table').on('page-change.bs.table', function() {
$('.checkbox').each(function() {
if ($.inArray($(this).attr('name'), selections) !== -1) {
$(this).prop('checked', true);
}
});
});
// 存储选择的多选框
var selections = [];
// 每次点击多选框时更新存储的选择
$('#example-table').on('check.bs.table uncheck.bs.table', function(e, row) {
var index = $.inArray(row.id, selections);
if (index === -1) {
selections.push(row.id);
} else {
selections.splice(index, 1);
}
});
});
```
代码中用到了bootstrap table的一些事件和函数,例如page-change.bs.table(翻页事件)、check.bs.table(选定事件)等。需要注意的是,如果每次只是简单地保存选定的行号而不是将实际的行数据存储下来,在修改某个行数据后会导致之前选定的行号与实际行数据的对应关系发生改变,这时需要根据实际的行数据进行重新选定。
以上就是bootstrap table多选框分页保留的示例代码攻略,可以根据实际情况进行简单修改即可应用于自己的网站中。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:bootstrap table 多选框分页保留示例代码 - Python技术站