Layui表格開關按鈕，點擊表格開關按鈕修改狀態前后台代碼記錄

首先先看下圖片

前端代碼：（代碼過長，只看我標記的部分吧）

<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'layedit', 'laydate'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var layedit = layui.layedit;
        var laydate = layui.laydate;

        table.render({
            elem: '#test'
            , url: '/TBUserSelectPageAllServlet'/*tpa=http://www.layui.com/test/table/demo1.json*/
            , toolbar: '#toolbarDemo' //開啟頭部工具欄，並為其綁定左側模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側圖標。如無需自定義，去除該參數即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用戶數據表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'username', title: '用戶名', width: 80, edit: 'text'}
                // ,{field:'email', title:'郵箱', width:150, edit: 'text', templet: function(res){
                //         return '<em>'+ res.email +'</em>'
                //     }}
                , {field: 'password', title: '密碼', width: 80, edit: 'text', sort: true}
                , {field: 'real_name', title: '真實姓名', width: 100}
                , {
                    field: 'type', title: '用戶類型', width: 80, templet: function (res) {
                        if (res.type == 1) {
                            return "<span style='color: red'>管理員</span>"
                        } else if (res.type == 2) {
                            return "<span style='color: green'>業務員</span>"
                        } else {
                            return "其他人員"
                        }
                    }
                }
　　　　　　　　//注意了，input標簽內添加了自定義屬性(userId)，因為修改狀態碼需要獲取userId和狀態碼
               , { field: 'is_del', title: '是否鎖定', width: 80, sort: true, templet: function (res) { if (res.is_del == 1) { return '<input type="checkbox" checked="checked" name="is_del" lay-filter="switchTest" lay-skin="switch" lay-text="鎖定|未鎖定" userId=' + res.id + '>' } else if (res.is_del == 2) { return '<input type="checkbox" name="is_del" lay-filter="switchTest" lay-skin="switch" lay-text="鎖定|未鎖定" userId=' + res.id + '>' } } }
                , {field: 'img', title: '頭像', width: 90}
                , {field: 'create_time', title: '創建時間', width: 180, sort: true}
                , {field: 'modify_time', title: '修改時間', width: 180}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
            , parseData: function (res) { //res 即為原始返回的數據
                var code = 1;
                if (res.resultCode == 20000) {
                    code = 0;
                } else {
                    code = res.resultCode;
                }
                return {
                    "code": code, //解析接口狀態
                    "msg": res.resultMsg, //解析提示文本
                    "count": res.totalCount, //解析數據長度
                    "data": res.resultData //解析數據列表
                };
            }
        });
        
        //監聽指定開關
 form.on('switch(switchTest)', function (data) { //根據lay-filter進行監聽 console.log(this.checked ? "1" : "2"); var is_rel = this.checked ? "1" : "2"; //鎖定狀態賦值為1，未鎖定賦值為2，根據數據庫中的值 console.log(data.elem.attributes['userId'].nodeValue); //獲取修改數據的參數條件 $.ajax({ url: 'TBUserUpdateIsRelByIdServlet', type: 'post', data: { 'id': data.elem.attributes['userId'].nodeValue, 'is_rel': is_rel }, success: function (res) { console.log(res); }, dataType: 'json' }); form.render(); }); }); </script>

注意兩點：

1.你需要把該條數據的唯一標識寫到屬性里如：userId=res.id ，這樣可以在后台點擊事件中，取到值，作為后台修改數據的參數條件

2.在監聽指定開關事件中，用 data.elem.attributes['userId'].nodeValue 獲取到對應的userId值

后端代碼：

package controller; import com.alibaba.fastjson.JSONObject; import mapper.TBUserMapper; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; @WebServlet(name = "TBUserUpdateIsRelByIdServlet", urlPatterns = "/TBUserUpdateIsRelByIdServlet") public class TBUserUpdateIsRelByIdServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String id = req.getParameter("id"); String is_rel = req.getParameter("is_rel"); TBUserMapper tbUserMapper = new TBUserMapper(); int i = tbUserMapper.updateIsDelById(Integer.parseInt(id), Integer.parseInt(is_rel)); Map map = new HashMap(); if (i == 1) { map.put("code", "0"); map.put("msg", "yes"); } else { map.put("code", "400"); map.put("msg", "no"); } String s = JSONObject.toJSONString(map); PrintWriter writer = resp.getWriter(); writer.print(s); writer.close(); } }