layui数据表格checkbox编辑的时候选中

最新推荐文章于 2024-08-21 19:39:31 发布

黄宝康

最新推荐文章于 2024-08-21 19:39:31 发布

阅读量4.3k

点赞数

分类专栏： layui 文章标签： layui数据表格checkbox编辑的时候选中

本文链接：https://blog.csdn.net/huangbaokang/article/details/81983930

版权

本文介绍了如何在layui数据表格编辑模式下实现参与人列表的复选框选中状态回显。通过模拟点击事件并结合layui的监听方法，将需要回显的数据存储并应用到编辑过程中。同时，代码还实现了分页勾选状态的记忆功能，弥补了layui当前版本的不足。详细解决方案可参考作者之前的文章。

摘要由CSDN通过智能技术生成

在编辑的时候，比如说一次活动，有很多参与人，编辑这次活动的时候，参与人以弹窗的形式以layui table展示，这需要参与人勾选中，即所谓的数据回显。

以下代码实现了编辑的时候回显，如果是新增的时候，ids为空数组，如果是编辑，则进行初始化，编辑的思路主要是js模拟复选框的click事件，配合layui监听复选框的方法，把需要的数据进行全局缓存存储，实例中主要靠

var ids =new Array();
var names =new Array();
var table_data=new Array();

来维持，代码还实现了分页勾选的记忆功能，layui目前版本还没有实现这一个功能，可以查看我之前发的一篇博客。https://blog.csdn.net/huangbaokang/article/details/80783316

整体代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.jfinal.kit.PropKit" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择参与人员</title>
<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>
<style>
    .search_body{ width:850px; height:600px;}
    .search{
     width:850px;margin:10px auto;}
</style>
</head>
<body>
<div id="join_in" class="search_body">
    <div class="search">
        <div class="layui-input-inline">
            <input type="text" name="pmName" style="margin-left:15px;" lay-verify="title" autocomplete="off" placeholder="