layui table默認(rèn)跳頁(yè)后不存在源頁(yè)面選中的狀態(tài)。如果要實(shí)現(xiàn)記錄源頁(yè)面的選中狀態(tài)，需要定義一個(gè)全局變量來(lái)記錄數(shù)據(jù)選中狀態(tài)。

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變量記錄選中的數(shù)據(jù)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 = {};//在發(fā)送請(qǐng)求前將選中的數(shù)據(jù)放入條件中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] || "返回的數(shù)據(jù)狀態(tài)異常") + "</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 + '">數(shù)據(jù)接口請(qǐng)求異常</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])}}...//在文件的最后添加設(shè)置選中變量的方法//設(shè)置初始選中值,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, 參數(shù)e表示table的idd.getLayuiPageCheckedIds=function (e) {return c.config[e].layuiPageCheckedIds;},//設(shè)置選中的ids,e表示table的id,obj表示選中的行數(shù)據(jù)，v表示記錄哪一個(gè)參數(shù)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;},//添加選中項(xiàng)d.setPageSelected=function(layuiPageCheckedIds, seleted){if(layuiPageCheckedIds == undefined || layuiPageCheckedIds == ""){return "," + seleted + ",";}else{return layuiPageCheckedIds + seleted + ",";}},//取消選中項(xiàng)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、后臺(tái)根據(jù)id設(shè)置數(shù)據(jù)選中狀態(tài)

@RequestMapping(value = "/search", method = RequestMethod.GET)@ResponseBodypublic 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()已經(jīng)被選中，則設(shè)置選中狀態(tài)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;//設(shè)置初始選中項(xiàng)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'});//初始化選中項(xiàng)table.initPageCheckedIds('idTest', checkedIds );//監(jiān)聽表格復(fù)選框選擇table.on('checkbox(demo)', function(obj){//設(shè)置多頁(yè)面選中效果//第一個(gè)參數(shù)表示table的id值，第二個(gè)參數(shù)表示復(fù)選框選中的數(shù)據(jù)，第三個(gè)參數(shù)表示要解析的是哪一個(gè)屬性值（這里是將數(shù)據(jù)模型中的id屬性進(jìn)行解析）。table.setLayuiPageCheckedIds('idTest',obj, "id");//獲取所有選中的id值（例如：“,1,2,5,7,3,15,22”）//alert(table.getLayuiPageCheckedIds('idTest'));}); });

總結(jié)

以上是生活随笔為你收集整理的layui table 复选框跳页后再回来保持原来选中的状态的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。