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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
vue.js todolist实现代码
Oct 29 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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的pcntl多进程用法实例
2015/03/19 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
详谈python http长连接客户端
2017/06/12 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python流程控制 if else实现解析
2019/09/02 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
质检的岗位职责
2013/11/17 职场文书
迟到检讨书400字
2014/01/13 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
第二课堂活动总结
2014/05/07 职场文书
岗位说明书标准范本
2014/07/30 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android