layui table 复选框跳页后再回来保持原来选中的状态示例

2023-08-10 08:36:04 343

layuitable默认跳页后不存在源页面选中的状态。如果要实现记录源页面的选中状态，需要定义一个全局变量来记录数据选中状态。

1、修改table.js

;layui.define(["laytpl","laypage","layer","form"],function(e){
"usestrict";
vart=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){
vari=this;
returni.config=t.extend({},i.config,e),i
},
on:function(e,t){
returnlayui.onevent.call(this,s,e,t)
}
}

...

S.prototype.pullData=function(e,i){
vara=this,n=a.config,o=n.request,r=n.response,d=function(){
"object"==typeofn.initSort&&a.sort(n.initSort.field,n.initSort.type)
};
if(a.startTime=(newDate).getTime(),n.url){
varc={};
//在发送请求前将选中的数据放入条件中
if(n.layuiPageCheckedIds!=undefined&&""!=n.layuiPageCheckedIds){
n.where.layuiCheckedIds=n.layuiPageCheckedIds;
}
if(tableRender){
varcurrPageNumber=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;
}
returnt[r.statusName]!=r.statusCode?(a.renderForm(),a.layMain.html(''+(t[r.msgName]||"返回的数据状态异常")+"

")):(a.renderData(t,e,t[r.countName]),d(),n.time=(newDate).getTime()-a.startTime+"ms",i&&l.close(i),void("function"==typeofn.done&&n.done(t,e,t[r.countName]))) }, error:function(e,t){ a.layMain.html('数据接口请求异常

'),a.renderForm(),i&&l.close(i) } }); }elseif(n.data&&n.data.constructor===Array){ if(null!=startLoading){ layer.close(startLoading); startLoading=null; } vars={},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"==typeofn.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){ returnc.config[e].layuiPageCheckedIds; }, //设置选中的ids,e表示table的id,obj表示选中的行数据，v表示记录哪一个参数 d.setLayuiPageCheckedIds=function(e,obj,v){ vara=c.config[e]; varlayuiPageCheckedIds=a.layuiPageCheckedIds; //全选按钮 if(obj.type=="all"){ //全选 if(obj.checked){ varcheckStatus=d.checkStatus(e); vardatas=checkStatus.data; for(vari=0;i=0){ returnlayuiPageCheckedIds.substring(0,pos)+layuiPageCheckedIds.substring(pos+match.length-1); } } });

2、后台根据id设置数据选中状态

@RequestMapping(value="/search",method=RequestMethod.GET)
@ResponseBody
publicMapsearch(Pageablepageable,@RequestParamListlayuiCheckedIds){
Maprst=newHashMap<>(4);
rst.put("code",0);
rst.put("msg","");

Pagepage=personService.findPage(pageable);

rst.put("count",page.getTotalSize());
List>datas=newArrayList<>(8);

for(Personperson:page.getContent()){
Mapview=newHashMap<>(4);
view.put("id",person.getId());
view.put("name",person.getName());

//如果person.getId()已经被选中，则设置选中状态
if(!CollectionUtils.isEmpty(layuiCheckedIds)&&layuiCheckedIds.contains(person.getId())){
view.put("LAY_CHECKED",true);
}
...
datas.add(view);
}
rst.put("data",datas);
returnrst;
}

3、前端用法

layui.use("table",function(){
vartable=layui.table;

//设置初始选中项
varcheckedIds="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);
//监听表格复选框选择
table.on('checkbox(demo)',function(obj){
//设置多页面选中效果
//第一个参数表示table的id值，第二个参数表示复选框选中的数据，第三个参数表示要解析的是哪一个属性值（这里是将数据模型中的id属性进行解析）。
table.setLayuiPageCheckedIds('idTest',obj,"id");

//获取所有选中的id值（例如：“,1,2,5,7,3,15,22”）
//alert(table.getLayuiPageCheckedIds('idTest'));
});
});

以上这篇layuitable复选框跳页后再回来保持原来选中的状态示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

layui table 复选框跳页后再回来保持原来选中的状态示例

热门推荐

随机推荐