使用layui.js实现表格数据动态展示

首先呢，先要创建一个 html 页面，其次在 head 中引入以下包点击此处下载 layui v2.4.5点击此处保存 jquery 3.3.1<link rel="stylesheet" href="../assets/layui/css/layui.css"><link rel="stylesheet" href="../assets/css/view.cs...

liumengwei1

9423人浏览 · 2018-11-20 15:54:51

liumengwei1 · 2018-11-20 15:54:51 发布

首先呢，先要创建一个 html 页面，其次在 head 中引入以下包

点击此处下载 layui v2.4.5

点击此处保存 jquery 3.3.1

<link rel="stylesheet" href="../assets/layui/css/layui.css">
<link rel="stylesheet" href="../assets/css/view.css"/>
<script src="../assets/layui/layui.all.js"></script>
<script src="../assets/jquery-1.7.1.min.js"></script>

其次，将页面框架写好

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理后台</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-page-header">
        <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">用户</a>
                  <a><cite>用户列表</cite></a>
                </span>
            <h2 class="title">用户列表</h2>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">用户名:</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input type="text" autocomplete="off" class="layui-input" id="username">
                            </div>
                            <div class="layui-form-mid">手机号:</div>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" autocomplete="off" class="layui-input" id="mobile">
                            </div>
                            <div class="layui-form-mid">性别:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select name="gender" id="gender">
                                    <option value=""></option>
                                    <option value="0">未知</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                            <div class="layui-form-mid">用户等级:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select name="user_level" id="user_level">
                                    <option value=""></option>
                                    <option value="0">普通用户</option>
                                    <option value="1">VIP用户</option>
                                    <option value="2">高级VIP用户</option>
                                </select>
                            </div>
                            <div class="layui-form-mid">账号状态:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select name="status" id="status">
                                    <option value=""></option>
                                    <option value="0">可用</option>
                                    <option value="1">禁用</option>
                                    <option value="2">注销</option>
                                </select>
                            </div>
                            <br>
                            <br>
                            <div class="layui-form-mid">身份证ocr:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select name="is_auth" id="is_auth">
                                    <option value=""></option>
                                    <option value="0">未认证</option>
                                    <option value="1">已认证</option>
                                </select>
                            </div>
                            <div class="layui-form-mid">银行卡绑定:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select name="is_bank" id="is_bank">
                                    <option value=""></option>
                                    <option value="0">未认证</option>
                                    <option value="1">已认证</option>
                                </select>
                            </div>
                            <button class="layui-btn layui-btn-blue query">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary" onclick="nameClean()">重置</button>
                        </div>
                    </div>
                    <table id="demo" lay-filter="demoEvent"></table>
                    <script type="text/html" id="barDemo">
                        <button class="layui-btn layui-btn-xs withdrawUpdate" id="withdrawUpdate" lay-event="edit" >查看</button>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

view.css

.layui-view-body{
    background-color: #f0f2f5;
}

.layui-content{
    padding: 20px;
}

.layui-tab-title{
    border-bottom-color: #e8e8e8;
}
.layui-card .layui-tab-brief .layui-tab-title li{
    margin:0 15px;
    padding: 0;
}

.layui-form-checked i, .layui-form-checked:hover i,
.layui-form-radio>i:hover, .layui-form-radioed>i,
.layui-breadcrumb a:hover,
.layui-laypage a:hover,
.layui-tab-brief>.layui-tab-title .layui-this{
    color: #177ce3!important;
}

.layui-btn-primary:hover,
.layui-form-onswitch,
.layui-form-checked[lay-skin=primary] i,
.layui-form-checkbox[lay-skin=primary]:hover i,
.layui-form-checked, .layui-form-checked:hover,
.layui-tab-brief>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-title .layui-this:after{
    border-color: #177ce3;
}

.layui-checkbox-disbaled[lay-skin=primary]:hover i {
    border-color: #d2d2d2!important;
}

.layui-form-onswitch,
.layui-form-checked[lay-skin=primary] i,
.layui-form-select dl dd.layui-this,
.layui-laypage .layui-laypage-curr .layui-laypage-em,
.layui-form-checked span, .layui-form-checked:hover span{
    background-color: #177ce3;
}
.layui-btn-blue{
    background-color: #177ce3;
    background-repeat: repeat-y;
    background-image: -moz-linear-gradient(left,#29adeb,#177ce3);
    background-image: -webkit-linear-gradient(left,#29adeb,#177ce3);
    background-image: -o-linear-gradient(left,#29adeb,#177ce3);
    background-image: linear-gradient(left,#29adeb,#177ce3);
}

.layui-form-checkbox[lay-skin=primary]:hover span{
    background: 0 0!important;
}

.layui-page-header{
    margin: -20px -20px 20px;
}

.layui-page-header .pagewrap{
    padding: 15px 20px;
    background-color: #fff;
}

.layui-page-header .title{
    margin-top: 15px;
}

.chart-card{
    padding: 20px 24px 8px;
}

.chart-card .chart-header{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.chart-card .metawrap{
    float: left;
}

.chart-card .metawrap .meta{
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px;
    height: 22px;
}

.chart-card .metawrap .total{
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    color: rgba(0,0,0,.85);
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 30px;
    line-height: 38px;
    height: 38px;
}

.chart-card .chart-body{
    margin-bottom: 12px;
    position: relative;
    width: 100%;
}

.chart-card .chart-footer{
    padding-top: 9px;
    margin-top: 8px;
    border-top: 1px solid #e8e8e8;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.chart-card .field{

}

.chart-card .field span{
    font-size: 14px;
    line-height: 22px;
}

.chart-card .field span:last-child{
    margin-left: 8px;
    color: rgba(0,0,0,.85);
}

.form-box{
    padding: 10px 0;
}

好了，然后看看 js 确定引入了么，css 确定没毛病么，有毛病就先改改，没毛病，那就继续吧，嘿嘿

获取到 table 标签，开始请求接口了

where：请求接口需要的参数

cols：根据返回的 json 将列编写出来

    var datagrid;
    layui.use('table', function() {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        datagrid = table.render({
            elem: '#demo'
            , where:
                {
                    rsid: localStorage.getItem("rsid"),
                    username : $("#username").val(),
                    mobile : $("#mobile").val(),
                    gender : $("#gender").val(),
                    user_level : $("#user_level").val(),
                    status : $("#status").val(),
                    is_auth : $("#is_auth").val(),
                    is_bank : $("#is_bank").val()
                }
            , url: 'http://localhost:8119/merchant/users'
            , dataType:"json"
            , cols: [[
                {field: 'id', title: 'ID',  sort: true}
                , {field: 'username', title: '用户名'}
                , {field: 'mobile', title: '手机号', width: 130}
                , {field: 'gender', title: ' 性别'}
                , {field: 'user_level', title: '用户等级'}
                , {field: 'status', title: '账号状态'}
                , {field: 'lastLoginTime', title: '上次登陆时间', width: 200}
                , {field: 'merchant_name', title: '商户名'}
                , {field:'', fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , skin: 'line'
            , loading: true
            , even: true
            , page: true
            , limits: [5, 7, 10]
            , limit: 5
        });
    });

如果说需要将返回的结果填充到 layui 规定的格式中，那么需要加入parseData 属性，拿到 json 中的 status、msg、count、body

parseData: function(res){
    return {
        "code": res.status,
        "msg": res.msg,
        "count": res.count,
        "data": res.body.item
    };
}

当然，如果表格中含有类似 level 这种字段，肯定需要数字与文字之间对应的啦

或者呢，需要拿到数据之后做一些判断之类的操作

那么就在该段代码中加入done属性

done: function(res){
    var status = res.code;
    if(status === '10000') {
        parent.location.href ="../../login.html";
    }
    $("[data-field='user_level']").children().each(function () {
        if ($(this).text() === '0') {
            $(this).text("普通用户")
        } else if ($(this).text() === '1') {
            $(this).text("VIP用户")
        } else if ($(this).text() === '2') {
            $(this).text("高级VIP用户")
        }
    })
}

如果要在列表中单击查询单列数据的话，那么就需要编写一个弹出层咯

table.on('tool(demoEvent)', function(obj){
    data = obj.data;
    sessionStorage.allmessage = JSON.stringify(data);
    var layEvent = obj.event;
    if(layEvent === 'edit') {
        var index = layer.open({
            type: 2,
            title: '查询用户信息',
            closeBtn: 1,
            area: ['550px', '500px'],
            shadeClose: true,
            skin: 'demo layui-layer-rim',
            content: 'user_info.html'
        });
    }
});

刷新表格的话，就需要调用 reload 方法咯

    $(".query").on("click",function()
    {
        //刷新表格
        datagrid.reload(
            {
                where:
                    {
                        rsid: localStorage.getItem("rsid"),
                        username: $("#username").val(),
                        mobile : $("#mobile").val(),
                        gender : $("#gender").val(),
                        user_level : $("#user_level").val(),
                        status : $("#status").val(),
                        is_auth : $("#is_auth").val(),
                        is_bank : $("#is_bank").val()
                    }
            });
    });

好啦，结束

博主扣扣：博主微信：