bootstrapTable实现分页时，获取到所有页码的复选框选中数据，在切换页码时保持勾选状态

最新推荐文章于 2025-03-21 10:55:33 发布

前端小胖砸

最新推荐文章于 2025-03-21 10:55:33 发布

阅读量3.1k

点赞数 3

文章标签： javascript json 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45153463/article/details/123504236

版权

bootstrapTable有很多的events可以使用，具体的大家可以去bootstrapTable的官网上去看，我今天主要是介绍我用到的几个事件。

我用到的主要有四个事件，onCheck（单选）、onUncheck（取消单选）、onCheckAll（全选）、onUncheckAll（全选反选）备注事件位置：与responseHandler和onLoadSuccess是并列的位置。

获取到所有页码的复选框选中数据，我是利用了session存储的方法，假设，我将在session中存储一个数组类型的选中数据，名称为downSessionData;

代码如下：

1、设置公共方法，其中各项的形参中data为数据源，fageName为存储到session中设置的名称，也就是字符串downSessionData

//分页选中添加存储
function addSessionData(data, fageName) {
  let downSelectData = JSON.parse(window.sessionStorage.getItem(fageName));
  if(downSelectData && downSelectData.length > 0) {
    if(downSelectData.every(key => key.id !== data.id)) {
      downSelectData.push(data);
    }
  } else {
    downSelectData = [];
    downSelectData.push(data);
  }
  window.sessionStorage.setItem(fageName, JSON.stringify(downSelectData));
}
//分页选中删除存储
function deletSessionData(data, fageName) {
  let downSelectData = JSON.parse(window.sessionStorage.getItem(fageName));
  downSelectData.forEach((item, i) => {
    if(item.id === data.id) {
      downSelectData.splice(i, 1);
    }
  })
  window.sessionStorage.setItem(fageName, JSON.stringify(downSelectData));
}
//全部选中添加存储
function allCheckAddSession(datas, fageName) {
  let downSelectData = JSON.parse(window.sessionStorage.getItem(fageName));
  if(downSelectData && downSelectData.length > 0) {
    datas.forEach(item => {
      if(downSelectData.every(keys => keys.id !== item.id)) {
        downSelectData.push(item);
      }
    })
  } else {
    downSelectData = datas;
  }
  window.sessionStorage.setItem(fageName, JSON.stringify(downSelectData));
}
//全部取消选中删除存储
function deletAllCheckSession(datas, fageName) {
  let downSelectData = JSON.parse(window.sessionStorage.getItem(fageName));
  datas.forEach(item => {
    downSelectData.forEach((keys, key) => {
      if(item.id === keys.id) {
        downSelectData.splice(key, 1);
      }
    })
  })
  window.sessionStorage.setItem(fageName, JSON.stringify(downSelectData));
}

2、调用如下（保持勾选状态）

注意点：数据源一定要有主键id

//页面初始化sessionStorage清空
window.sessionStorage.setItem('downSessionData', JSON.stringify([]));


//注意：以下四个方法是放在bootstrapTable中的
onCheck: function(row) {
  addSessionData(row, 'downSessionData');
},
onUncheck: function(row) {
  deletSessionData(row, 'downSessionData');
},
onCheckAll: function(row) {
  allCheckAddSession(row, 'downSessionData');
},
onUncheckAll: function(row) {
  deletAllCheckSession(row, 'downSessionData');
},

columns:[
    {field: ' ',checkbox: true,rowspan: 1,align: 'center',valign: 'middle',formatter: function(value, row) {
        let getSessionData = JSON.parse(window.sessionStorage.getItem('downSessionData'));
        if(getSessionData.some(item => item.id === row.id)) {
          return {
            checked: true
          }
        }
        return value;
      }},
]