跳至主要內容

LayUI实现根据条件改变表头

Yaien Blog原创大约 5 分钟前端LayUI

LayUI实现根据条件改变表头

使用LayUI框架，请求后台数据并将数据渲染到表格中。

需求

要求：根据 收支科目 调整表头展示项。

数据源（cols.js）

/**
 * 表格头部数据
 * @type {{title: *[]}}
 */
let tableTitle = {
        title: [
            {
                id: '0',
                data: [
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名', width: 80}
                    , {field: 'sex', title: '性别', width: 80, sort: true}
                    , {field: 'sign', title: '签名', width: 177}
                    , {field: 'wealth', title: '财富', width: 135, sort: true}
                ]
            },
            {
                id: '1',
                data: [
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名', width: 80}
                    , {field: 'sex', title: '性别', width: 80, sort: true}
                    , {field: 'city', title: '城市', width: 80}
                    , {field: 'sign', title: '签名', width: 177}
                    , {field: 'experience', title: '积分', width: 80, sort: true}
                    , {field: 'score', title: '评分', width: 80, sort: true}
                    , {field: 'classify', title: '职业', width: 80}
                    , {field: 'wealth', title: '财富', width: 135, sort: true}
                ]
            },
            {
                id: '2',
                data: [
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'username', title: '用户名', width: 80}
                    , {field: 'sex', title: '性别', width: 80, sort: true}
                    , {field: 'city', title: '城市', width: 80}
                    , {field: 'sign', title: '签名', width: 177}
                    , {field: 'classify', title: '职业', width: 80}
                    , {field: 'wealth', title: '财富', width: 135, sort: true}
                ]
            }
        ]
    };

/**
 * 数据源
 * @type {*[]}
 */
let tableData = [{
    "id": 10000,
    "username": "user-0",
    "sex": "女",
    "city": "城市-0",
    "sign": "签名-0",
    "experience": 255,
    "logins": 24,
    "wealth": 82830700,
    "classify": "作家",
    "score": 57
}, {
    "id": 10001,
    "username": "user-1",
    "sex": "男",
    "city": "城市-1",
    "sign": "签名-1",
    "experience": 884,
    "logins": 58,
    "wealth": 64928690,
    "classify": "词人",
    "score": 27
}, {
    "id": 10002,
    "username": "user-2",
    "sex": "女",
    "city": "城市-2",
    "sign": "签名-2",
    "experience": 650,
    "logins": 77,
    "wealth": 6298078,
    "classify": "酱油",
    "score": 31
}, {
    "id": 10003,
    "username": "user-3",
    "sex": "女",
    "city": "城市-3",
    "sign": "签名-3",
    "experience": 362,
    "logins": 157,
    "wealth": 37117017,
    "classify": "诗人",
    "score": 68
}, {
    "id": 10004,
    "username": "user-4",
    "sex": "男",
    "city": "城市-4",
    "sign": "签名-4",
    "experience": 807,
    "logins": 51,
    "wealth": 76263262,
    "classify": "作家",
    "score": 6
}, {
    "id": 10005,
    "username": "user-5",
    "sex": "女",
    "city": "城市-5",
    "sign": "签名-5",
    "experience": 173,
    "logins": 68,
    "wealth": 60344147,
    "classify": "作家",
    "score": 87
}, {
    "id": 10006,
    "username": "user-6",
    "sex": "女",
    "city": "城市-6",
    "sign": "签名-6",
    "experience": 982,
    "logins": 37,
    "wealth": 57768166,
    "classify": "作家",
    "score": 34
}, {
    "id": 10007,
    "username": "user-7",
    "sex": "男",
    "city": "城市-7",
    "sign": "签名-7",
    "experience": 727,
    "logins": 150,
    "wealth": 82030578,
    "classify": "作家",
    "score": 28
}, {
    "id": 10008,
    "username": "user-8",
    "sex": "男",
    "city": "城市-8",
    "sign": "签名-8",
    "experience": 951,
    "logins": 133,
    "wealth": 16503371,
    "classify": "词人",
    "score": 14
}, {
    "id": 10009,
    "username": "user-9",
    "sex": "女",
    "city": "城市-9",
    "sign": "签名-9",
    "experience": 484,
    "logins": 25,
    "wealth": 86801934,
    "classify": "词人",
    "score": 75
}, {
    "id": 10010,
    "username": "user-10",
    "sex": "女",
    "city": "城市-10",
    "sign": "签名-10",
    "experience": 1016,
    "logins": 182,
    "wealth": 71294671,
    "classify": "诗人",
    "score": 34
}, {
    "id": 10011,
    "username": "user-11",
    "sex": "女",
    "city": "城市-11",
    "sign": "签名-11",
    "experience": 492,
    "logins": 107,
    "wealth": 8062783,
    "classify": "诗人",
    "score": 6
}, {
    "id": 10012,
    "username": "user-12",
    "sex": "女",
    "city": "城市-12",
    "sign": "签名-12",
    "experience": 106,
    "logins": 176,
    "wealth": 42622704,
    "classify": "词人",
    "score": 54
}, {
    "id": 10013,
    "username": "user-13",
    "sex": "男",
    "city": "城市-13",
    "sign": "签名-13",
    "experience": 1047,
    "logins": 94,
    "wealth": 59508583,
    "classify": "诗人",
    "score": 63
}, {
    "id": 10014,
    "username": "user-14",
    "sex": "男",
    "city": "城市-14",
    "sign": "签名-14",
    "experience": 873,
    "logins": 116,
    "wealth": 72549912,
    "classify": "词人",
    "score": 8
}, {
    "id": 10015,
    "username": "user-15",
    "sex": "女",
    "city": "城市-15",
    "sign": "签名-15",
    "experience": 1068,
    "logins": 27,
    "wealth": 52737025,
    "classify": "作家",
    "score": 28
}, {
    "id": 10016,
    "username": "user-16",
    "sex": "女",
    "city": "城市-16",
    "sign": "签名-16",
    "experience": 862,
    "logins": 168,
    "wealth": 37069775,
    "classify": "酱油",
    "score": 86
}, {
    "id": 10017,
    "username": "user-17",
    "sex": "女",
    "city": "城市-17",
    "sign": "签名-17",
    "experience": 1060,
    "logins": 187,
    "wealth": 66099525,
    "classify": "作家",
    "score": 69
}, {
    "id": 10018,
    "username": "user-18",
    "sex": "女",
    "city": "城市-18",
    "sign": "签名-18",
    "experience": 866,
    "logins": 88,
    "wealth": 81722326,
    "classify": "词人",
    "score": 74
}, {
    "id": 10019,
    "username": "user-19",
    "sex": "女",
    "city": "城市-19",
    "sign": "签名-19",
    "experience": 682,
    "logins": 106,
    "wealth": 68647362,
    "classify": "词人",
    "score": 51
}, {
    "id": 10020,
    "username": "user-20",
    "sex": "男",
    "city": "城市-20",
    "sign": "签名-20",
    "experience": 770,
    "logins": 24,
    "wealth": 92420248,
    "classify": "诗人",
    "score": 87
}, {
    "id": 10021,
    "username": "user-21",
    "sex": "男",
    "city": "城市-21",
    "sign": "签名-21",
    "experience": 184,
    "logins": 131,
    "wealth": 71566045,
    "classify": "词人",
    "score": 99
}, {
    "id": 10022,
    "username": "user-22",
    "sex": "男",
    "city": "城市-22",
    "sign": "签名-22",
    "experience": 739,
    "logins": 152,
    "wealth": 60907929,
    "classify": "作家",
    "score": 18
}, {
    "id": 10023,
    "username": "user-23",
    "sex": "女",
    "city": "城市-23",
    "sign": "签名-23",
    "experience": 127,
    "logins": 82,
    "wealth": 14765943,
    "classify": "作家",
    "score": 30
}, {
    "id": 10024,
    "username": "user-24",
    "sex": "女",
    "city": "城市-24",
    "sign": "签名-24",
    "experience": 212,
    "logins": 133,
    "wealth": 59011052,
    "classify": "词人",
    "score": 76
}, {
    "id": 10025,
    "username": "user-25",
    "sex": "女",
    "city": "城市-25",
    "sign": "签名-25",
    "experience": 938,
    "logins": 182,
    "wealth": 91183097,
    "classify": "作家",
    "score": 69
}, {
    "id": 10026,
    "username": "user-26",
    "sex": "男",
    "city": "城市-26",
    "sign": "签名-26",
    "experience": 978,
    "logins": 7,
    "wealth": 48008413,
    "classify": "作家",
    "score": 65
}, {
    "id": 10027,
    "username": "user-27",
    "sex": "女",
    "city": "城市-27",
    "sign": "签名-27",
    "experience": 371,
    "logins": 44,
    "wealth": 64419691,
    "classify": "诗人",
    "score": 60
}, {
    "id": 10028,
    "username": "user-28",
    "sex": "女",
    "city": "城市-28",
    "sign": "签名-28",
    "experience": 977,
    "logins": 21,
    "wealth": 75935022,
    "classify": "作家",
    "score": 37
}, {
    "id": 10029,
    "username": "user-29",
    "sex": "男",
    "city": "城市-29",
    "sign": "签名-29",
    "experience": 647,
    "logins": 107,
    "wealth": 97450636,
    "classify": "酱油",
    "score": 27
}];

/**
 * 获取表格头部
 * @param id 条件
 * @returns {*[]|*} 表格头部数据
 */
function getTableTitle(id) {
    console.log("我进来了---");
    let result = tableTitle.title[0].data;
    tableTitle.title.forEach(item => {
        if (id === item.id) {
            result = item.data
        }
    });
    return result;
}

代码实现


<html>
    <head>
        <meta charset="utf-8">
            <title>激励分Demo</title>
            <meta content="webkit" name="renderer">
                <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
                    <meta http-equiv="Expires" content="0">
                        <meta http-equiv="Pragma" content="no-cache">
                            <meta http-equiv="Cache-control" content="no-cache">
                                <meta http-equiv="Cache" content="no-cache">
                                    <meta
                                        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
                                        name="viewport">
                                        <link href="layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
                                            <link href="layuiadmin/style/admin.css" media="all" rel="stylesheet">
                                                <link href="layuiadmin/style/login.css" media="all" rel="stylesheet">

                                                    <style>
                                                        .layui-table th {
                                                        font - weight: bold;
                                                    }
                                                    </style>
    </head>

    <body>
        <div class="layui-form demoTable" style="padding-top: 14px;">
            <div class="layui-row layui-col-space12 layui-form-item">
                <div class="layui-col-md3">
                    <label class="layui-form-label">职位:</label>
                    <div class="layui-input-inline">
                        <select name="classify" id="classify">
                            <option value="-1"></option>
                            <option value="0">作家</option>
                            <option value="1">词人</option>
                            <option value="2">诗人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <button class="layui-btn" data-type="reload">查 询</button>
                </div>
            </div>
        </div>

        <table class="layui-hide" id="test"></table>

        <script src="layuiadmin/layui/layui.js"></script>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="cols.js"></script>
        <script>
            layui.config({
            base: 'layuiadmin/'
        }).extend({
            index: 'lib/index'
        }).use('table', function () {
            let table = layui.table;
            let id = $('#classify').val();
            table.render({
            elem: '#test'
            , data: tableData
            , cols: [getTableTitle(id)]
            , id: 'testReload'
            , page: true
            , limits: [10, 15, 20]
            , limit: 15
            , size: 'sm'
        });
            let active = {
            reload: function () {
            let id2 = $('#classify').val();
            table.reload('testReload', {
            cols: [getTableTitle(id2)]
            , page: {curr: 1}
        });
        }
        };

            $('.demoTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        });

        </script>

    </body>
</html>

效果展示

存在问题

问题：当表头列数多于下一次需要渲染的列数时，多余的列数并不会清楚

解决方法：每一次查询都去删除表头，再重新添加 实现：

  1. 添加div，将table包住
<div id="myTable">
    <table class="layui-hide" id="test"></table>
</div>
  1. 修改查询方法实现
let active = {
    reload: function () {
        let id2 = $('#classify').val();

        $("#myTable").empty();
        $("#myTable").append('<table class="layui-hide" id="test"></table>');

        table.render({
            elem: '#test'
            , data: tableData
            , cols: [getTableTitle(id2)]
            , id: 'testReload'
            , page: true
            , limits: [10, 15, 20]
            , limit: 15
            , size: 'sm'
        });
    }
};
上次编辑于:
贡献者: yanggl