layuitable复选框跳页后再回来保持原来选中的状态示例-创新互联
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('' + (t[r.msgName] || "返回的数据状态异常") + "")) : (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('数据接口请求异常'), 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);
}
}
}); 网站栏目：layuitable复选框跳页后再回来保持原来选中的状态示例-创新互联
本文链接：http://6mz.cn/article/hdihe.html