基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...

最新推荐文章于 2024-05-18 09:37:38 发布

weixin_34354173

最新推荐文章于 2024-05-18 09:37:38 发布

阅读量2.1k

点赞数

文章标签： javascript php python ViewUI

原文链接：https://my.oschina.net/kevin2kelly/blog/2873643

版权

2019独角兽企业重金招聘Python工程师标准>>>

公司让做一个app基础数据管理后台系统，前端就以layuiCMS2.0为模板，拷贝到项目resources/static目录下开始了，以下是自己写的一个带自定义分页的动态数据表格的实现，下来直接上代码：

项目src目录结构：

后台api数据格式：

/demo/check请求结果：

其他请求结果：

渲染表格页面demoList.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo列表--layui后台管理模板 2.0</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">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui-v2.4.3/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" class="layui-input searchVal" id="account" placeholder="请输入account"/>
            </div>
            <a class="layui-btn search_btn" data-type="reload">搜索</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal add_btn">添加demo</a>
        </div>
        <!--<div class="layui-inline">-->
        <!--<a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>-->
        <!--</div>-->
    </form>
</blockquote>
<table id="demoList" lay-filter="demoList"></table>
<div id="pageTool"></div>

<script type="text/javascript" src="../../layui-v2.4.3/layui.js"></script>
<script type="text/javascript" src="demoList.js"></script>
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
</body>
</html>

demo添加页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加demo--layui后台管理模板 2.0</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">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui-v2.4.3/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form demoAdd">
    <div class="layui-form-item">
        <label class="layui-form-label">account</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input account" id="account" lay-verify="required" placeholder="请输入account"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">sex</label>
        <div class="layui-input-block">
            <select name="quiz" id="sex">
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-block" lay-filter="addDemo" lay-submit id="submit">提交</button>
    </div>
</form>
<script type="text/javascript" src="../../layui-v2.4.3/layui.js"></script>
<script type="text/javascript" src="demoList.js"></script>
</body>
</html>

demo编辑界面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo编辑--layui后台管理模板 2.0</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">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui-v2.4.3/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form demoUpdate">
    <div class="layui-form-item">
        <label class="layui-form-label">职员账号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input account" id="account" lay-verify="required" placeholder="请输入account"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">sex</label>
        <div class="layui-input-block">
            <select name="quiz" id="sex">
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-block" lay-filter="updateDemo" lay-submit id="submit">提交</button>
    </div>
</form>
<script type="text/javascript" src="../../layui-v2.4.3/layui.js"></script>
<script type="text/javascript" src="demoList.js"></script>
</body>
</html>

js文件：

/*引入'form', 'layer',  'table',  'util', 'laypage'模块*/
layui.use(['form', 'layer', 'table', 'util', 'laypage'], function () {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,//内置jquery
        util = layui.util,
        laypage = layui.laypage,//分页模块
        table = layui.table;
    var key = window.sessionStorage.getItem("key"); //获得sessionStorage中的参数

    //动态渲染数据表格
    var tableIns = table.render({
        elem: '#demoList', //div_id
        url: '../../demo/check', //动态获取数据的地址
        method: 'post',
        where: {page: 0, size: 10, key: key/*,……*/},//初始加载时，服务端请求参数
        cellMinWidth: 95,  //单元格最小宽度
        height: "full-160",
        parseData: function (res) { //解析服务端返回的原始数据，res 即为原始返回的数据
            if (判断服务端是否请求成功) { //请求成功
                return {
                    "code": 0, //解析接口状态  0代表请求成功
                    "data": res.data.list,  //当前页请求获得的数据
                    "count": res.data.totalElement,//总记录数
                    "curr": res.data.currentPage + 1,//当前页
                    "size": res.data.pageSize,//每页最大显示记录数
                    "msg": res.message//服务端提示信息
                };
            } else if (判断用户未登录) { //
                layer.alert(res.message, function () {
                    // 未登录，需要跳转到登陆页面
                    top.location.href = "/page/login/login.html";
                });
            } else {//异常
                layer.msg(res.message);
            }

        },
        id: "demoListTab",  //动态生成的表格的id
        /*定义表格列标题
        field：数据对应的属性名，title：标题，templet：回调函数，一般用于数据格式化*/
        cols: [[
            {type: "checkbox", fixed: "left", width: 50},//复选框
            {field: 'account', title: '账户', width: 180, align: "center"},
            {field: 'sex', title: '性别', width: 180, align: "center"},
            {field: 'createdTime', title: '创建时间', width: 180, align: "center", templet: formatDate},
            {title: '操作', width: 230, fixed: "right", align: "center", templet: operate} //操作事件列
        ]],
        /*渲染表格数据结束执行的回调,此处根据服务端数据进行了分页插件的重新渲染。
        res：服务端数据，count：记录数，curr：当前页，但是发现值不更新，所以弃用该值，可能是使用方式不对，欢迎指正！*/
        done: function (res, curr, count) {
            //渲染分页栏回调函数
            renderPage(res, count);
        }
    });


    //渲染分页栏
    function renderPage(data, count) {
        laypage.render({
            elem: 'pageTool', //分页栏div的id
            curr: data.curr, //当前页
            count: count, //总记录数
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],//分页栏显示按钮
            groups: 5, //页码横列显示五条，其他全用省略号显示
            limit: data.size,  // curr，count，limit都是服务端返回的数据
            limits: [10, 15, 20, 30], //可选的每页显示记录数
            jump: function (obj, first) {   //分页栏变动回调
                if (!first) {  //不是初次加载
                    table.reload("demoListTab", {
                        where: {
                            account: $("#account").val(),
                            page: obj.curr - 1,
                            size: obj.limit,   //page，size为分页插件当前变动后，要请求服务端的数据
                            key: key//token
                        }
                    })
                }
            }
        });
    }

    //绑定检索事件，事件触发，重新加载表格
    $(".search_btn").on("click", function () {
        table.reload("demoListTab", {
            where: {
                account: $("#account").val(),
                page: 0,
                size: $(".layui-laypage-limits>select>option:selected").val(), //检索时获得每页显示记录数
                key: key//token
            }
        });
    });

    //绑定添加事件
    $(".add_btn").click(function () {
        //渲染添加界面
        addRender();
    })

    //列表操作。每条数据最后可以进行的操作
    table.on('tool(demoList)', function (obj) {
        var layEvent = obj.event,//获得事件名
            data = obj.data;  //获得当前行数据
        if (layEvent === 'edit') { //编辑
            updateRender(data);//渲染编辑界面
        } else if (layEvent === 'del') { //删除
            layer.confirm('确定删除此记录？', {icon: 5, title: '危险操作'}, function (index) {
                $.post("../../demo/delete", {
                    account: data.account,
                    key: key
                }, function (data) {
                    tableIns.reload();//重新加载表格
                    layer.close(index);
                })
            });
        }
    });

    //编辑视图渲染
    function updateRender(edit) {
        var index = layer.open({
            title: "编辑demo",
            type: 2,
            area: ["450px", "500px"],
            content: "page/demo/demoUpdate.html", //编辑界面html地址
            success: function (layero, index) {
                var body = $($(".layui-layer-iframe", parent.document).find("iframe")[0].contentWindow.document.body);
                //填充要编辑的值
                body.find("#account").val(edit.account).attr("disabled", "disabled");
                body.find("#sex option[value=" + edit.sex + "]").prop("selected", 'selected');
                form.render();
            }
        })
    }

    //添加视图渲染
    function addRender() {
        var index = layer.open({
            title: "添加demo",
            type: 2,
            area: ["450px", "500px"],
            content: "page/demo/demoAdd.html",
            success: function (layero, index) {
            }
        })
    }

    //编辑信息提交事件绑定
    form.on("submit(updateDemo)", function (data) {
        top.layer.close(index);
        //弹出loading
        var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
        // 实际使用时的提交信息
        $.post("../../demo/update", {
            account: $("#account").val(),
            sex: $("#sex").val(),
            key: key
        }, function (res) {
            var result = JSON.parse(res);
            top.layer.close(index);
            layer.closeAll("iframe");
            var code = result.code;
            if (code != 1) {
                top.layer.msg(result.message);
            }
            $(".layui-tab-item.layui-show", parent.document).find("iframe")[0].contentWindow.location.reload();
        })
        return false;
    })

    //添加提交事件绑定
    form.on("submit(addDemo)", function (data) {
        top.layer.close(index);
        //弹出loading
        var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
        // 实际使用时的提交信息
        $.post("../../demo/add", {
            account: $("#account").val(),
            sex: $("#sex").val(),
            key: key
        }, function (res) {
            var result = JSON.parse(res);
            top.layer.close(index);
            layer.closeAll("iframe");
            var code = result.code;
            if (code != 1) {
                top.layer.msg(result.message);
            }
            $(".layui-tab-item.layui-show", parent.document).find("iframe")[0].contentWindow.location.reload();
        })
        return false;
    })

    //时间格式化
    function formatDate(d) {
        return util.toDateString(d.createdTime, 'yyyy-MM-dd HH:mm:ss');
    }

    //操作类格式化
    function operate() {
        return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +
            '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
    }
})

效果图：