解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
程序员文章站
2022-07-11 16:12:08
在项目中发现layui数据表格勾选复选框checkbox的时候，转到新的一页勾选，上一次的勾选不会选中，即没有记忆功能。导致跟后台交互传递参数不全问题。
为了解决此问题，...
在项目中发现layui数据表格勾选复选框checkbox的时候，转到新的一页勾选，上一次的勾选不会选中，即没有记忆功能。导致跟后台交互传递参数不全问题。
为了解决此问题，我们可以借助缓存，每勾选一个，保存到缓存变量数组中，取消勾选的时候，删除缓存的对应项。
<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%>
<%@ page import="com.jfinal.kit.propkit" %>
<%@ page import="com.jfinal.kit.propkit" %>
<%
string path = request.getcontextpath();
%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 引入公共css,js -->
<jsp:include page="/resource/jspf/include_common.jsp"></jsp:include>
<!-- 引入自定义css -->
<style type="text/css">
.layui-table-view .layui-form-checkbox[lay-skin=primary] i{margin-top:6px;}
.bo{border:1px solid;}
/* .imgs{border:1px solid;width:200px;height:300px;position:fixed;/* display:none; */} */
</style>
<title>提醒党员</title>
</head>
<body style="margin-top:5px;">
<div class="layui-fluid">
<form class="layui-form layui-fluid" action="">
<div class="layui-row">
<div class="layui-form-item layui-col-md12">
<div class="layui-row hei" style="width:90%;margin:0 auto;">
<div class="layui-col-md2 layui-col-md-offset1 layui-input-inline"><!-- style="margin-left:15%" -->
<input type="text" name="pmname" class="layui-input" placeholder="党员姓名"/>
</div>
<div class="layui-col-md2 layui-input-inline">
<input type="text" name="phone" class="layui-input" placeholder="手机号"/>
</div>
<div class="layui-col-md2 layui-input-inline">
<input type="text" name="org_name" class="layui-input" placeholder="所在组织"/>
</div>
<div class="layui-col-md3">
<input type="button" class="layui-btn zh-btn" lay-submit="" lay-filter="chaxun" btn-search value="查询" />
<input type="button" class="layui-btn zh-btn" btn-renovate value="刷新" />
</div>
</div>
</div>
</div>
</form>
<div class="layui-row">
<div class="layui-col-md12">
<xblock class="xb">
<button class="layui-btn" btn-confirm><i class="layui-icon"></i>确定党员
</button>
</xblock>
<table id="idtest" lay-data="{id: 'idtest'}" class="layui-table" lay-filter="test"></div></table>
<div id="page"></div>
</div>
</div>
</div>
<script type="text/html" id="sextpl">
{{# if(d.sex ==0){ }}
女
{{# } else { }}
男
{{# } }}
</script>
<script type="text/html" id="imgtpl">
{{# if(d.head_url == null){ }}
<img class="img_ra" src="<%=path%>/resource/images/default.jpg" width="32" height="32"/>
{{# } else { }}
<a href='{{d.head_url}}' target="_blank"><img src='{{d.head_url}}' width="32" height="32"/></a>
{{# } }}
</script>
</body>
<script type="text/javascript">
var gloable_pm_codes = new array();// 勾选的pm_code集合
var gloable_pm_names = new array();
var gloable_tels = new array();
var table_data = new array();// 表格数据缓存
layui.use(['table', 'layer','jquery','laydate','form','element'], function () {
var layer = layui.layer
,form = layui.form
,table = layui.table
,layer = layui.layer
,laydate = layui.laydate
,element = layui.element
, $ = layui.jquery;
var h = document.body.clientheight&&document.documentelement.clientheight - 130;//窗口高度
//监听改变窗口大小
window.onresize = function(){
h = document.body.clientheight&&document.documentelement.clientheight - 130;//窗口高度
tableins.reload('idtest',{height:h});//刷新数据表格
//window.location.reload(); //刷新iframe页面
}
//确定选择的党员
$('button[btn-confirm]').on('click',function(){
var checkstatus = table.checkstatus('idtest')
,data = checkstatus.data; //选中信息
var str=""; //参与人姓名拼串
var tels="";
if(gloable_pm_codes.length==0){
layer.alert("请选择提醒党员");
return;
}
for(var i=0;i<gloable_pm_codes.length;i++){
if(i<gloable_pm_codes.length-1){
str += gloable_pm_names[i]+",";
tels += gloable_tels[i]+",";
}else{
str += gloable_pm_names[i];
tels += gloable_tels[i];
}
}
parent.document.getelementbyid("joinpm").value=str; //将参与人员传到父级输入框
parent.document.getelementbyid("tels").value = tels;
close(window.name);//关闭弹窗
});
//监听搜索查询
form.on('submit(chaxun)', function(data){
var name = data.field.pmname;
var phone = data.field.phone;
var org_name = data.field.org_name;
tableins.reload({
page:{
curr:1// 重新从第一页开始
}
,where:{
name : name,
phone : phone,
org_name : org_name
}
});
});
//刷新
$('input[btn-renovate]').on('click',function(){ //部分参与
window.location.reload(); //刷新iframe页面
});
//方法级渲染
var tableins = window.demotable = table.render({
elem: '#idtest'
,id:'idtest'
, url:'<%=path%>/partymember/getpartymemberscontainchildren'
, cols: [[ //标题栏
{checkbox: true, lay_checked: false, filter:'test'}
,{field: 'head_url', title: '头像', width: 100, align: 'center',templet:'#imgtpl'}
, {field: 'name', title: '党员姓名', width: 180, align: 'center'}
, {field: 'org_name', title: '组织机构', width: 280, align: 'center'}
, {field: 'mobile_no', title: '手机号', width: 220, align: 'center'}
, {field: 'sex', title: '性别', width: 80, align: 'center',templet:'#sextpl'}
]]
,height:h
, page: true //是否显示分页
,limits : [ 15, 20,50, 100 ]
,limit : 15 //每页默认显示的数量
,done:function(res,curr,count){
$('table tr').on('click',function(){
$('table tr').css('background','');
$(this).css('background','<%=propkit.use("config.properties").get("table_color")%>');
});
// 设置换页勾选之前的
table_data = res.data;
//在缓存中找到pm_code ,然后设置data表格中的选中状态
//循环所有数据，找出对应关系，设置checkbox选中状态
for(var i=0;i<res.data.length;i++){
for(var j=0;j<gloable_pm_codes.length;j++){
if(res.data[i].pm_code==gloable_pm_codes[j]){
//这里才是真正的有效勾选
res.data[i]["lay_checked"]='true';
//找到对应数据改变勾选样式，呈现出选中效果
var index= res.data[i]['lay_table_index'];
$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addclass('layui-form-checked');
}
}
}
//设置全选checkbox的选中状态，只有改变lay_checked的值， table.checkstatus才能抓取到选中的状态
var checkstatus = table.checkstatus('test');
if(checkstatus.isall){
$(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
$('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addclass('layui-form-checked');
}
}
});
//复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
table.on('checkbox(test)', function (obj) {
console.log(obj);
if(obj.checked==true){
if(obj.type=='one'){
gloable_pm_codes.push(obj.data.pm_code);
gloable_pm_names.push(obj.data.name);
gloable_tels.push(obj.data.mobile_no);
}else{
for(var i=0;i<table_data.length;i++){
gloable_pm_codes.push(table_data[i].pm_code);
gloable_pm_names.push(table_data[i].name);
gloable_tels.push(table_data[i].mobile_no);
}
}
}else{
if(obj.type=='one'){
for(var i=0;i<gloable_pm_codes.length;i++){
if(gloable_pm_codes[i]==obj.data.pm_code){
gloable_pm_codes.remove(i);
gloable_pm_names.remove(i);
gloable_tels.remove(i);
}
}
}else{
for(var i=0;i<gloable_pm_codes.length;i++){
for(var j=0;j<table_data.length;j++){
if(gloable_pm_codes[i]==table_data[j].pm_code){
gloable_pm_codes.remove(i);
gloable_pm_names.remove(i);
gloable_tels.remove(i);
}
}
}
}
}
});
//删除数组自定义函数
array.prototype.remove=function(dx)
{
if(isnan(dx)||dx>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}
//监听排序
table.on('sort(test)', function (obj) {
console.log(this, obj.field, obj.type);
return;
table.reload('test', {
initsort: obj
, where: { //重新请求服务端
key: obj.field //排序字段
, order: obj.type //排序方式
}
});
});
$('.layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//监听批量选择
var active = {
isall: function () { //验证是否全选
var checkstatus = table.checkstatus('idtest');
layer.msg(checkstatus.isall ? '全选' : '未全选')
}
};
element.init();
});
//关闭弹窗
function close(windowname){
var index = parent.layer.getframeindex(windowname);
parent.layer.close(index);
}
</script>
</html>
其中复选框勾选监听中的obj.type这个字段是layui自带的。我从控制台浏览器发现有这个字段。
勾选一个的时候，type为one，而且数据data里也会带上lay_checked和lay_table_index字段。
全选的时候type变成all
符：页面效果图
以上这篇解决layui选择全部,换页checkbox复选框重新勾选的问题方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。