layui table動態表頭改變表格頭部從新加載表格

時間 2019-11-06

原文原文鏈接

改變頭部原理: 刪除原來表格, 從新創建DOM元素, 從新加載table,實現表頭改變javascript

明白了原理, 我相信你們都能寫出來了, table.reload(ID, options)目前好像還不支持cons的基礎函數變更,只能使用其餘方式了,簡單暴力,哈哈哈哈哈哈哈哈嗝!!css

下面是示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>
<div id="myTable">
    <table id="demo" lay-filter="test"></table>
</div>
<button id="buttonChangeTitle" class="layui-btn ">點擊改變表頭</button>

<script type="text/javascript" src="static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['element', 'jquery', 'table'], function () {
        var $ = layui.jquery
            , table = layui.table
            , element = layui.element; //Tab的切換功能，切換事件監聽等，須要依賴element模塊

        var data = [
            {
                "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
            }]
        var title =
            [ //表頭
                {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: '財富', sort: true}
            ]
        var title2 =
            [ //表頭
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用戶名', width: 80}
                , {field: 'wealth', title: '財富', sort: true}
            ]

        //第一個實例
        var tableIns = table.render({
            elem: '#demo'
            , id: 'demoTest'
            , height: 312
            // ,url: '/demo/table/user/' //數據接口
            , data: data
            , page: true //開啓分頁
            , cols: [title]
        });

        $("#buttonChangeTitle").on("click", function () {
            $("#myTable").empty();
            $("#myTable").append('<table id="demo"></table>');

            //第一個實例
            var tableIns2 = table.render({
                elem: '#demo'
                , id: 'demoTest'
                , height: 312
                // ,url: '/demo/table/user/' //數據接口
                , data: data
                , page: true //開啓分頁
                , cols: [title2]
            });
        })


    })
</script>

</body>
</html>