layui table 复选框跳页后再回来保持原来选中的状态示例


Posted in Javascript onOctober 26, 2019

layui table默认跳页后不存在源页面选中的状态。如果要实现记录源页面的选中状态,需要定义一个全局变量来记录数据选中状态。

1、修改table.js

;layui.define(["laytpl", "laypage", "layer", "form"], function (e) {
 "use strict";
 var t = layui.$, i = layui.laytpl, a = layui.laypage, l = layui.layer, n = layui.form, o = layui.hint(),
  r = layui.device(), d = {
   //layuiPageCheckedIds变量记录选中的数据id,格式是“,1,2,3,4,”的字符串
   config: {checkName: "LAY_CHECKED", indexName: "LAY_TABLE_INDEX", layuiPageCheckedIds: ","},
   cache: {},
   index: layui.table ? layui.table.index + 1e4 : 0,
   set: function (e) {
    var i = this;
    return i.config = t.extend({}, i.config, e), i
   },
   on: function (e, t) {
    return layui.onevent.call(this, s, e, t)
   }
  }
  
  ...
  
  S.prototype.pullData = function (e, i) {
  var a = this, n = a.config, o = n.request, r = n.response, d = function () {
   "object" == typeof n.initSort && a.sort(n.initSort.field, n.initSort.type)
  };
  if (a.startTime = (new Date).getTime(), n.url) {
   var c = {};
   //在发送请求前将选中的数据放入条件中
   if(n.layuiPageCheckedIds != undefined && "" != n.layuiPageCheckedIds){
    n.where.layuiCheckedIds = n.layuiPageCheckedIds;
   }
   if(tableRender){
    var currPageNumber = getPageNumber();
    c[o.pageName] = currPageNumber;
    tableRender = false;
   }else{
    setPageNumberCookie(e);
    c[o.pageName] = e;
   }
   c[o.limitName] = n.limit;
   t.ajax({
    type: n.method || "get",
    url: n.url,
    data: t.extend(c, n.where),
    dataType: "json",
    success: function (t) {
     if(null != startLoading){
      layer.close(startLoading);
      startLoading = null;
     }
     return t[r.statusName] != r.statusCode ? (a.renderForm(), a.layMain.html('<div class="' + f + '">' + (t[r.msgName] || "返回的数据状态异常") + "</div>")) : (a.renderData(t, e, t[r.countName]), d(), n.time = (new Date).getTime() - a.startTime + " ms", i && l.close(i), void("function" == typeof n.done && n.done(t, e, t[r.countName])))
    },
    error: function (e, t) {
     a.layMain.html('<div class="' + f + '">数据接口请求异常</div>'), a.renderForm(), i && l.close(i)
    }
   });
  } else if (n.data && n.data.constructor === Array) {
   if(null != startLoading){
    layer.close(startLoading);
    startLoading = null;
   }
   var s = {}, u = e * n.limit - n.limit;
   s[r.dataName] = n.data.concat().splice(u, n.limit), s[r.countName] = n.data.length, a.renderData(s, e, n.data.length), d(), "function" == typeof n.done && n.done(s, e, s[r.countName])
  }
 }
 ...
 //在文件的最后添加设置选中变量的方法
 //设置初始选中值
 ,d.initPageCheckedIds=function(e,i){
  if(i == undefined || i == ""){
   i = "";
  }
  if(i.length > 0 && "," != i.substring(0,1)){
   i = "," + i;
  }
  if(i.length > 0 && "," != i.substring(i.length - 1, i.length)){
   i = i + ",";
  }
  c.config[e].layuiPageCheckedIds = i;
 },
 //获取选中的ids, 参数e表示table的id
 d.getLayuiPageCheckedIds=function (e) {
   return c.config[e].layuiPageCheckedIds;
 },
 //设置选中的ids,e表示table的id,obj表示选中的行数据,v表示记录哪一个参数
 d.setLayuiPageCheckedIds=function (e,obj,v) {
  var a = c.config[e];
  var layuiPageCheckedIds = a.layuiPageCheckedIds;
  //全选按钮
  if(obj.type == "all"){
   //全选
   if (obj.checked) {
    var checkStatus = d.checkStatus(e);
    var datas = checkStatus.data;
    for(var i = 0; i < datas.length; i++) {
     layuiPageCheckedIds = d.setPageSelected(layuiPageCheckedIds, datas[i][v]);
    }
   } 
 //取消全选
 else {
    var cache = d.cache;
    var datas = cache[e];
    for(var i = 0; i < datas.length; i++) {
     layuiPageCheckedIds = d.cancelPageSelected(layuiPageCheckedIds, datas[i][v]);
    }
   }
  }
 //单行选中
 else {
 //选中
   if (obj.checked) {
    layuiPageCheckedIds = d.setPageSelected(layuiPageCheckedIds, obj.data[v]);
   }
 //取消选中
 else {
    layuiPageCheckedIds = d.cancelPageSelected(layuiPageCheckedIds, obj.data[v]);
   }
  }
  a.layuiPageCheckedIds = layuiPageCheckedIds;
 },
 //添加选中项
 d.setPageSelected=function(layuiPageCheckedIds, seleted){
  if(layuiPageCheckedIds == undefined || layuiPageCheckedIds == ""){
    return "," + seleted + ",";
   }else{
    return layuiPageCheckedIds + seleted + ",";
   }
 },
 //取消选中项
 d.cancelPageSelected=function (layuiPageCheckedIds, seleted) {
  var match = "," + seleted + ",";
  var pos = layuiPageCheckedIds.indexOf(match);
  if (pos >= 0) {
   return layuiPageCheckedIds.substring(0, pos) + layuiPageCheckedIds.substring(pos + match.length - 1);
  }
 }
});

2、后台根据id设置数据选中状态

@RequestMapping(value = "/search", method = RequestMethod.GET)
 @ResponseBody
 public Map<String, Object> search(Pageable pageable, @RequestParam List<Long> layuiCheckedIds) {
  Map<String, Object> rst = new HashMap<>(4);
  rst.put("code", 0);
  rst.put("msg", "");

  Page<Person> page = personService.findPage(pageable);
  
  rst.put("count", page.getTotalSize());
  List<Map<String, Object>> datas = new ArrayList<>(8);
  
  for (Person person : page.getContent()) {
   Map<String, Object> view = new HashMap<>(4);
   view.put("id", person.getId());
   view.put("name", person.getName());
 
 //如果person.getId()已经被选中,则设置选中状态
   if (!CollectionUtils.isEmpty(layuiCheckedIds) && layuiCheckedIds.contains(person.getId())) {
    view.put("LAY_CHECKED", true);
   }
   ...
   datas.add(view);
  }
  rst.put("data", datas);
  return rst;
 }

3、前端用法

layui.use("table", function(){
 var table = layui.table;

 //设置初始选中项
 var checkedIds = "1,2,3,4";
 table.render({
 elem: '#test',
 url:"./person/search",
 where: {"layuiCheckedIds": checkedIds },
 ,cols: [[
 {type:'checkbox', width:'10%'},
 {field:'id', title: 'ID', width:'20%'},
 {field:'name', title: '姓名', width:'15%'}
 ]],
 page: true,
 id:'idTest'
 });
 //初始化选中项
 table.initPageCheckedIds('idTest', checkedIds );
 //监听表格复选框选择
 table.on('checkbox(demo)', function(obj){
  //设置多页面选中效果
  //第一个参数表示table的id值,第二个参数表示复选框选中的数据,第三个参数表示要解析的是哪一个属性值(这里是将数据模型中的id属性进行解析)。
  table.setLayuiPageCheckedIds('idTest',obj, "id");
 
 //获取所有选中的id值(例如:“,1,2,5,7,3,15,22”)
 //alert(table.getLayuiPageCheckedIds('idTest'));
 });
});

以上这篇layui table 复选框跳页后再回来保持原来选中的状态示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
VUE兄弟组件传值操作实例分析
Oct 26 #Javascript
layui实现给某一列加点击事件
Oct 26 #Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 #Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 #Javascript
You might like
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
详解python中sort排序使用
2019/03/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python调用JavaScript代码的方法
2020/10/27 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
大学考试作弊检讨书
2014/01/30 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
民间个人借款协议书
2014/09/30 职场文书
手机销售员岗位职责
2015/04/11 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
如何判断pytorch是否支持GPU加速
2021/06/01 Python
vue router 动态路由清除方式
2022/05/25 Vue.js
python数字图像处理:图像简单滤波
2022/06/28 Python