自定义layui table列

最近遇到一个需求,要求可以用户自己配置layui Table的列名并可以存成模板,下次进来默认渲染成用户自定义的表格
先看Demo

动画.gif

  1. 实现这个需求用到了layui的两个组件 transfer table
    具体思路为:

1.1 弹窗显示穿梭框,穿梭框是这个表格的所有列名
1.2 选中之后,关闭弹窗回调选中的列名
1.3 在表格配置中重新render
1.4 实现

2.代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="layui-v2.5.7/layui/layui.js"></script>
    </head>
    <body>
        <div id="transferBox" class="demo-transfer"></div>
        <br /><br />
        <button id="getData" class="layui-btn layui-btn-normal">生成</button>
        <br /><br />
        <table id="diyTable" lay-filter="test"></table>
    </body>
</html>

<script>
    var colJson = [{
            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
        }
    ];


    layui.use(['table', 'transfer', 'util', 'layer'], function() {
        var table = layui.table;
        var transfer = layui.transfer;
        var layer = layui.layer;
        var util = layui.util;

        var tableIns = table.render({
            elem: '#diyTable',
            height: 312,
            url: '/demo/table/user/',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            page: true,
            cols: [colJson]
        });

        transfer.render({
            elem: '#transferBox',
            data: colJson,
            parseData: function(res) {
                return {
                    "value": res.field,
                    "title": res.title
                }
            },
            id: 'transferBox'
        })

        $("#getData").click(function() {
            var getData = transfer.getData('transferBox');
            colJson = [];
            $(getData).each(function(i, item) {
                console.log(item);
                var fieldItem = {
                    field: item.value,
                    title: item.title
                };
                colJson.push(fieldItem);
            })

            var tableIns = table.render({
                elem: '#diyTable',
                height: 312,
                url: '/demo/table/user/',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                page: true,
                cols: [colJson]
            });
        })
    });
</script>
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.zfjsec.com/729.html
-- 展开阅读全文 --
使用Git时出现一些报错解决办法
« 上一篇 07-01
MongoDB"提示发生服务特定错误:100"或"发生系统错误 5"解决办法
下一篇 » 07-07

发表评论