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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
为原生js Array增加each方法
Apr 07 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP 数组教程 定义数组
2009/10/23 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python collections模块使用方法详解
2019/08/28 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
自荐书模板
2013/12/19 职场文书
法院信息化建设方案
2014/05/21 职场文书
完整版商业计划书
2014/09/15 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python