layui根据部门查询信息

首先先看下图片

layui根据部门查询信息

我之前写的前端代码:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="layui/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域(可配合layui已有的水平导航) -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    admin
                </li>
                <li class="layui-nav-item">
                    <a href="login.html">注销</a>
                </li>
            </ul>
        </div>
    </div>
    </body>
    <form class="layui-form" action="" lay-filter="example" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">所在部门</label>
            <div class="layui-input-inline">
                <select id="ddremark" name="ddremark" lay-verify="required" lay-search="">
                    <option value="">请选择部门</option>
                    <option value="财务部">财务部</option>
                    <option value="市场部">市场部</option>
                    <option value="业务部">业务部</option>
                </select>
            </div>
            <div class="layui-btn-container">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即查询</button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="test" lay-filter="test">
    </table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<script>
    layui.use(['util', 'layer', 'table', 'form', 'jquery'], function () {
        var util = layui.util
            , layer = layui.layer
            , table = layui.table
            , $ = layui.jquery
            , form = layui.form;

        table.render({
            elem: '#test'
            , url: "/DepartmentFindAllServlet"/*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: 'uid', title: '用户编号', width: 80, fixed: 'left', unresize: true}
                , {field: 'uname', title: '用户登录名', width: 100, edit: 'text'}
                , {field: 'urealname', title: '真实姓名', width: 120, edit: 'text'}
                , {field: 'urname', title: '所属角色', width: 150}
                , {field: 'ddremark', title: '所属部门', width: 100}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
        });

        //select下拉框选中触发事件
        form.on("select", function (data) {
            table.render({
                elem: '#test'
                , url: '/DepartmentFindAllServlet?ddremark=' + data.value
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'uid', title: '用户编号', width: 80, fixed: 'left', unresize: true}
                    , {field: 'uname', title: '用户登录名', width: 100, edit: 'text'}
                    , {field: 'urealname', title: '真实姓名', width: 120, edit: 'text'}
                    , {field: 'urname', title: '所属角色', width: 150}
                    , {field: 'ddremark', title: '所属部门', width: 100}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , page: true
            });
        });
     //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了:' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

</body>
</html>

思考:

相信大家都已经看出来了,下拉框选中后触发的时间是又让表格重新渲染一遍,这样写明显不好

layui官网上有表格重载的方法

layui根据部门查询信息

 

 注释上面黄色的代码,替换为下面的代码

form.on('submit(formDemo)', function (data) {
            console.log('部门', data.field.ddremark);
            table.reload('test', {
                url: '/DepartmentFindAllServlet',
                method: 'post',
                where: {
                    ddremark: data.field.ddremark,
                },
            });
            return false;
        });
               

这样就好多啦

上一篇:Layui日期选择器+两个日期之间天数计算


下一篇:layui 上传文件 限制文件