layui table 復(fù)選框跳頁后再回來保持原來選中的狀態(tài)示例
layui table默認(rèn)跳頁后不存在源頁面選中的狀態(tài)。如果要實(shí)現(xiàn)記錄源頁面的選中狀態(tà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ā)送請求前將選中的數(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ù)接口請求異常</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表示記錄哪一個參數(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、后臺根據(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)聽表格復(fù)選框選擇
table.on('checkbox(demo)', function(obj){
//設(shè)置多頁面選中效果
//第一個參數(shù)表示table的id值,第二個參數(shù)表示復(fù)選框選中的數(shù)據(jù),第三個參數(shù)表示要解析的是哪一個屬性值(這里是將數(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ù)選框跳頁后再回來保持原來選中的狀態(tài)示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript事件學(xué)習(xí)小結(jié)(一)事件流
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(一)事件流的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScript腳本性能優(yōu)化注意事項(xiàng)
本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運(yùn)行性能的一些方法,其實(shí)這些經(jīng)驗(yàn)都基于幾條原則2008-11-11
前端實(shí)現(xiàn)Word在線預(yù)覽功能詳解
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時會遇到需要給用戶創(chuàng)建word文檔并實(shí)現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下2023-09-09
一文詳解Canvas實(shí)現(xiàn)打飛字游戲過程示例
這篇文章主要為大家介紹了Canvas實(shí)現(xiàn)打飛字游戲示例過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04

