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;
},
//添加選中項
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、后臺根據(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è)置初始選中項
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 );
//監(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隊列結(jié)構(gòu)Queue實(shí)現(xiàn)過程解析
這篇文章主要介紹了JavaScript隊列結(jié)構(gòu)Queue實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
百度地圖API之百度地圖退拽標(biāo)記點(diǎn)獲取經(jīng)緯度的實(shí)現(xiàn)代碼
這篇文章主要介紹了百度地圖API之百度地圖退拽標(biāo)記點(diǎn)獲取經(jīng)緯度的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-01-01
微信小程序調(diào)用wx.getImageInfo遇到的坑解決
這篇文章主要介紹了微信小程序調(diào)用wx.getImageInfo遇到的坑解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
easyui-combobox 實(shí)現(xiàn)簡單的自動補(bǔ)全功能示例
下面小編就為大家?guī)硪黄猠asyui-combobox 實(shí)現(xiàn)簡單的自動補(bǔ)全功能示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,2016-11-11
JavaScript之Canvas_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之Canvas,Canvas是HTML5新增的組件,它就像一塊幕布,可以用JavaScript在上面繪制各種圖表、動畫等2017-07-07
常見瀏覽器多長時間會提示“腳本運(yùn)行時間過長”總結(jié)
這篇文章主要介紹了常見瀏覽器多長時間會提示“腳本運(yùn)行時間過長”總結(jié),需要的朋友可以參考下2014-04-04
JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09

