layui bootstrap用户岗位读取数据库并回显在页面功能

冰激凌小孩
于 2022-01-08 20:26:28 发布
阅读量795
点赞数
文章标签： layui bootstrap 数据库前端 javascript
本文链接：https://blog.csdn.net/weixin_57209235/article/details/122385607
版权
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="${ctxPath}/common/layui-v2.6.4/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/css/sys/public.css" media="all">
</head>
<body>
<div class="czhui-container">
    <div class="czhui-main">
        <div style="margin: 10px 10px 10px 10px">
            <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="userName" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn">添加用户</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm data-edit-btn">编辑用户</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn">批量删除</button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="${ctxPath}/common/layui-v2.6.4/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table,
        czhui = layui.czhui;
    var data = {
        postNameList: null,
    }

    initialize();

    //页面初始化数据
    function initialize() {
        getPostNameList();
    }

    layui.use(['form', 'table'], function () {
        var czhpage = {};
        czhpage.query = {};
        czhpage.order = {};


        table.render({
            elem: '#currentTableId',
            url: '${ctxPath}/sys/user/list',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYYABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            even: true, //开启隔行变色
            cols: [[
                {type: "checkbox", width: 50, fixed: "left"},
                {field: 'id', width: 80, title: 'ID', hide: true},
                {field: 'loginName', width: 120, title: '登录账户', sort: true},
                {field: 'userName', width: 120, title: '用户名称', sort: true},
                {field: 'userCode', width: 120, title: '用户编号', sort: true},
                {field: 'orgId', width: 100, title: '组织机构id', sort: true},
                {
                    field: 'postId', width: 100, title: '岗位id', templet: function (rel) {
                        //岗位在页面上回显
                        let result = "";
                        $.each(data.postNameList, function (index) {
                            // 判断需要对那个选项进行回显
                            if (rel.postId == data.postNameList[index].id) {
                                result = data.postNameList[index].postName;
                                return;
                            }
                        });
                        return result;
                    }, sort: true
                },
                {field: 'state', width: 120, title: '角色状态',templet: stateFormat, sort: true,align: "center"},
                {field: 'phone', width: 180, title: '电话号码', sort: true},
                {field: 'email', width: 180, title: '邮箱地址', sort: true},
                {field: 'remarks', width: 150, title: '备注'},
                {field: 'createDate', width: 180, title: '创建时间', sort: true},
                {field: 'updateDate', width: 180, title: '更新时间', sort: true},
                {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            request: { //当接口需要请求参数时，在这修改,属性名不能修改,只能更改参数
                pageName: "pageNumber", //开始的页码的参数名称,newName是你接口需要的名字，默认：page
                limitName: "pageSize" //每页数据量的参数名,newNumber是你接口需要的名字，默认：limit
            },
            parseData: function (res) {
                //res是请求返回的数据，可以在parseData中对数据进行一些处理，返回layui要求的格式
                return {
                    'code': 0, //接口状态
                    'msg': res.msg, //提示文本
                    'count': res.data.totalRow, //数据长度
                    'data': res.data.list //数据列表，是直接填充进表格中的数组
                }
            }
        });
        function stateFormat(d) {
            if (d.state == 0) {
                str = '<div class="layui-btn layui-btn-danger layui-btn-xs" >停用</div>';
            } else if (d.state == 1) {
                str = '<div class="layui-btn layui-btn-xs" >启用</div>';
            }
            return str;
        }
        function mergeCzhpage() {
            var result = {};
            if (Object.keys(czhpage.query).length > 0) {
                for (var i in czhpage.query) {  //复制czhpage.query
                    result[i] = czhpage.query[i];
                }
            }
            if (Object.keys(czhpage.order).length > 0) {
                for (var i in czhpage.order) {  //复制czhpage.order
                    result[i] = czhpage.order[i];
                }
            }
            return result;
        }

        function doQuery(query, order) {
            if (query != null) {
                czhpage.query = query;
            }
            if (order != null) {
                czhpage.order = order;
            }
            // debugger;
            var result = mergeCzhpage();
            // 过滤请求参数-执行搜索
            if (Object.keys(result).length > 0) {
                table.reload('currentTableId', {page: {curr: 1}, where: result}, 'data');
            } else {
                table.reload('currentTableId', {page: {curr: 1}, where: {}}, 'data');
            }
        }

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = {}
            if ($.trim(data.field.userName) != "") {
                result.userName = data.field.userName
            }
            doQuery(result, null);
            return false;
        });

        // 监听排序操作
        table.on('sort(currentTableFilter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            // console.log(obj.field); //当前排序的字段名
            // console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            // console.log(this); //当前排序的 th 对象
            var result = {};
            result.orderByProperty = obj.field
            result.orderByValue = obj.type
            doQuery(null, result);
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {
            window.location.href = "${ctxPath}/sys/user/edit"
            return false;
        });

        // 监听顶部编辑按钮操作
        $(".data-edit-btn").on("click", function () {
            //获取选中行
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            if (data.length == 0) {
                layer.alert("请选中一行");
                return;
            }
            if (data.length > 1) {
                layer.alert("修改只能中一行");
                return;
            }
            var id = data[0].id;
            toInfo(id);
            return false;
        });

        //调转到详情页面，携带选中行id
        function toInfo(id) {
            window.location.href = "${ctxPath}/sys/user/edit?id=" + id
        };

        // 监听删除操作
        $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            //获取选中行id
            var arr = [];
            data.forEach(obj => {
                arr.push(obj.id);
            })
            del(arr);
            //layer.alert(JSON.stringify(data));
        });

        //删除方法
        function del(ids) {
            if (ids.length <= 0) {
                layer.alert("至少选中一行");
                return;
            }
            layer.confirm('确定要删除选中的记录？', function (index) {
                $.ajax({
                    type: "POST",
                    url: "${ctxPath}/sys/user/delete",
                    data: JSON.stringify(ids),
                    contentType: "application/json",
                    success: function (r) {
                        if (r.code == 200) {
                            window.location.href = "${ctxPath}/sys/user";
                            layer.close(index);
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        }

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            //console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                window.location.href = "${ctxPath}/sys/user/edit?id=" + data.id
                return false;
            } else if (obj.event === 'delete') {
                var arr = [data.id];
                del(arr)
            }
        });
    });
    //获取所有岗位
    function getPostNameList() {
        $.ajax({
            url: "${ctxPath}/sys/post/postNameList",
            dataType: "json",
            type: "post",
            success: function (result) {
                data.postNameList = result;
            }
        });
    }
</script>
<script>

</script>

</body>
</html>
上述是前端页面代码
这是前端页面，岗位在数据库user表中是数字，将数字转换成字回显在页面上，是上述中的代码