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

10年積累的網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程,更有新榮免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
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的id
d.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)
@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()已經(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)聽(tīng)表格復(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'));
});
});
以上這篇layui table 復(fù)選框跳頁(yè)后再回來(lái)保持原來(lái)選中的狀態(tài)示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站標(biāo)題:layuitable復(fù)選框跳頁(yè)后再回來(lái)保持原來(lái)選中的狀態(tài)示例
新聞來(lái)源:http://chinadenli.net/article40/pgjhho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名、App設(shè)計(jì)、微信小程序、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)