layui（表格搜索实现）

复制代码
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../head.jsp" %>
<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">
</head>

<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询用户</legend>
</fieldset>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="name" autocomplete="off" placeholder="请输入姓名"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">院系</label>
                        <div class="layui-input-block">
                            <select name="college" id="college" lay-filter="college">
                                <option value="">请选择</option>
                                <c:forEach items="${collegeList}" var="college">
                                    <option value="${college.collegeId}">${college.collegeName} </option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">专业</label>
                        <div class="layui-input-block">
                            <select name="major" id="major">
                                <option value="">-请选择-</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">班级</label>
                        <div class="layui-input-inline">
                            <input type="text" name="clazz" id="clazz" autocomplete="off" placeholder="请输入班级"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">年级</label>
                        <div class="layui-input-inline">
                            <input type="text" id="grade" name="grade" autocomplete="off" placeholder="请输入年级"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit=""
                                lay-filter="queryBtn">
                            <i class="layui-icon"></i>查询
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </fieldset>
        <!-- 头部工具栏模板 -->
        <script type="text/html" id="headToolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">禁用</button>
            </div>
        </script>
        <table class="layui-hide" id="myTable" lay-filter="myTable"></table>
        <script type="text/html" id="rowToolBar">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">密码重置</a>
        </script>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'jquery'], function () {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;
        table.render({
            elem: '#myTable'
            , url: 'BaseServlet.do?servlet=UserServlet&method=searchList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , where: {name: '', college: '', major: '', clazz: '', grade: ''}
            , cols: [[
                {field: 'userId', width: 50, type: 'checkbox'}
                , {
                    field: 'realName', width: 100, title: '姓名', style: 'font-size: 12px; color: #666; cursor:pointer;',
                    event: 'view'
                }
                , {field: 'college', width: 150, title: '院系', templet: college}
                , {field: 'major', width: 150, title: '专业', templet: major}
                , {field: 'clazz', width: 80, title: '班级',}
                , {field: 'grade', width: 80, title: '年级'}
                , {field: 'phone', width: 180, title: '手机号'}
                , {field: 'qq', width: 180, title: 'QQ号'}
                , {field: 'duty', width: 180, title: '校内职务'}
                , {field: 'forbidden', title: '用户状态', minWidth: 100, templet: forbidden}
                , {field: 'right', title: '操作', width: 200, align: 'center', toolbar: '#rowToolBar'}
            ]]
　　　　　　　// ,　text:{none: '请查询' // 默认无数据}
            , limits: [1, 10, 15, 30, 50, 100]
            , limit: 10
            , page: true
            , toolbar: '#headToolbar'
        });
        // 院系专业联动
        form.on('select(college)', function (data) {
            var college = $("select[name='college']").val();
            var url = "BaseServlet.do?servlet=MajorServlet&method=searchListAll&college=" + college;
            $.get(url, function (resp) {
                if (resp == "") {
                    $("select[name='major']").empty();
                    $("select[name='major']").append("<option value=''>无</option>")
                    form.render("select");
                } else {
                    var arr = resp.split(",");
                    $("select[name='major']").empty();
                    $("select[name='major']").append("<option value=''>-请选择-</option>")
                    for (let i = 0; i < arr.length; i++) {
                        let major = arr[i];
                        let arr2 = major.split("-");
                        $("select[name='major']").append("<option value='" + arr2[0] + "'>" + arr2[1] + "</option>")
                    }
                    form.render("select");
                }
            })
        });
        // 双击事件
        table.on('rowDouble(myTable)', function (obj) {
            layui.use('layer', function () {
                var index = layer.open({
                    title: '修改用户信息',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: "/BaseServlet.do?servlet=UserServlet&method=modifyPage&userId=" + obj.data.userId,
                    end: function () {
                        location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            });
        });
        //监听工具条
        table.on('tool(myTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('是否删除选择的信息?', function (index) {
                    let userId = data.userId;
                    let str = "/BaseServlet.do?servlet=UserServlet&method=del&userId=" + userId;
                    $.get(str, function (res) {
                        if (res == "true") {
                            // 要向后台请求Ajax，得到响应看结果，如果后台删除成功，再del
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            table.reload('myTable', {
                                page: {
                                    curr: 1
                                }
                            }, 'data');
                            //向服务端发送删除指令
                            layer.msg("删除成功！");
                        } else {
                            layer.msg("删除失败！");
                        }
                    })
                });
            } else if (layEvent === 'view') { //查看
                // 切换浏览器地址栏，即打开一个新的页面
                var index = layer.open({
                    title: '查看用户信息',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: "/BaseServlet.do?servlet=UserServlet&method=searchById&userId=" + data.userId,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (layEvent === 'reset') { //重置
                layer.confirm('是否重置密码?', function (index) {
                    let userId = data.userId;
                    let str = "/BaseServlet.do?servlet=UserServlet&method=modifyPw&userId=" + userId;
                    $.get(str, function (res) {
                        if (res == "true") {
                            layer.msg("重置成功！");
                        } else {
                            layer.msg("重置失败！");
                        }
                    })
                });
            }
        });
        var array = [];
        table.on('checkbox(myTable)', function (obj) {
            // console.log(obj.tr) //得到当前行元素对象
            var tr = obj.tr; //得到当前点击复选框的行元素对象
            if (obj.type == 'all') { //点击全选按钮触发此处
                var len = array.length;
                array.splice(0, len); //全选后删除数组项，重新添加全选的dom元素
                array.push(obj.tr.prevObject[0]);
            } else {
                if (obj.checked) { //多选框被选中则添加dom元素到数组
                    array.push(tr);
                } else {//取消多选框的选中则在数组中删除自己
                    var indexs = obj.tr[0].rowIndex;  //获取取消选中的元素对象下标
                    array.forEach((item, index) => {
                        //当数组中任意一个元素的rowIndex值与取消复选框的元素对象属性rowIndex的下标值相等，则在数组中删除该元素
                        if (item[0].rowIndex == indexs) {
                            array.splice(index, 1);
                        }
                    })
                }
            }
        });

        // 监听头部工具栏事件 toolbar是指的是表格头部的工具栏
        table.on('toolbar(myTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    var index = layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'BaseServlet.do?servlet=UserServlet&method=addPage',
                    });
                    // 关闭弹出层
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'delete':
                    if (checkStatus.data.length == 0) {
                        layer.msg("请选择要删除的记录！");
                    } else {
                        var jsonData = JSON.stringify(checkStatus.data);
                        var result = JSON.parse(jsonData);
                        var B = new Array();
                        for (let i = 0; i < result.length; i++) {
                            B[i] = result[i].userId;
                        }
                        layer.confirm('真的删除行么', function (index) {
                            let url = "BaseServlet.do?servlet=UserServlet&method=deleteAll&String=" + B;
                            $.get(url, function (res) {
                                if (res.search("true") != -1) {
                                    array.forEach((item) => {
                                        item.remove();
                                        table.reload('myTable', {
                                            page: {
                                                curr: 1
                                            }
                                            , where: {
                                                searchParams: result
                                            }
                                        }, 'data');
                                    })
                                    layer.msg("删除成功！");
                                    layer.close(index);
                                } else {
                                    layer.msg("删除失败！", {})
                                }
                            })
                        })
                    }
                    break;
            }
            ;
        });
        // 监听搜索操作
        form.on('submit(queryBtn)', function (data) {
            // id选择器获取搜索值
            var name = $('#name').val()
            var college = $('#college').val()
            var major = $('#major').val()
            var clazz = $('#clazz').val()
            var grade = $('#grade').val()
            if (name == '' && college == '' && major == '' && clazz == '' && grade == '') {
                layer.msg("搜索信息不能有空")
            } else {
                //执行搜索重载
                table.reload('myTable', {
                    url: 'BaseServlet.do?servlet=UserServlet&method=searchList',
                    where: {
                        name: name,
                        college: college,
                        major: major,
                        clazz: clazz,
                        grade: grade
                    },
                    limits: [1, 10, 15, 30, 50, 100]
                    , limit: 10
                    , page: true
                }, 'data');
            }
            return false;
        });
    });

    //院系的解析
    function college(row) {
        return row.college.collegeName;
    }

    //专业的解析
    function major(row) {
        return row.major.majorName;
    }

    function forbidden(row) {
        if (row.forbidden == 0) {
            return '正常';
        } else if (row.forbidden == 1) {
            return '禁用';
        } else {
            return '未知';
        }
    }
</script>
</body>
</html>
复制代码

 

posted @   想学前端的小李  阅读(1122)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手