Layui表格渲染

👉#个人简化写法 #

1、初始化参数

1. 当前页数: var pageCurr=n;

2. 每页最大显示数据条数: var pageSize=n;

3. url地址: var url='';

4. 数据渲染格式

   var cols = [[ { title: '标题', type: '绑定字段', sort: true, templet: '#numbers1', width: '7%' } ,{...} ]]

5. title:标题

6. type:绑定字段

7. sort:是否开启升序降序(bool类型)

8. templet:要绑定工具栏或函数,如：

9. hide:隐藏列

10. align:内容位置如：left,right,center

2、初始化模块

👉#加载依赖模块#

layui.use('table', function () {
    var table = layui.table,
        form = layui.form,
        layer = layui.layer,
        $ = layui.$,
        laypage = layui.laypage,
        util = layui.util;
		});

👉#表格渲染#

let userTable = table.render({
        elem: elem
        , url: url
        , type: type
        , loading: loading
        , cols: cols
		, done: function (data, curr, count) {
            laypage.render({
                elem: 'pageim'
                , count: count
                , curr: curnum
                , limit: limitcount
                , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                , jump: function (obj, first) {
                    if (!first) {
                        curnum = obj.curr;
                        limitcount = obj.limit;
                        productGroupId = count;
                        url = '/Admin/AjaxSelInvent?pageCurr=' + curnum + '&pageSize=' + limitcount + '&USERID=' + account;
                        getFormLimitData(productGroupId, curnum, limitcount);
                    }
                }
            })
        }
    });

👉#分页#

laypage.render({
                elem: 'pageim'
                , count: count
                , curr: curnum
                , limit: limitcount
                , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                , jump: function (obj, first) {
                    if (!first) {
                        curnum = obj.curr;
                        limitcount = obj.limit;
                        productGroupId = count;
                        url = '/Admin/AjaxSelInvent?pageCurr=' + curnum + '&pageSize=' + limitcount + '&USERID=' + account;
                        getFormLimitData(productGroupId, curnum, limitcount);
                    }
                }
            })

3.补充

var pageCurrs = 0;
var pageSizes = 0;
function Layui_Table_Loding(Page, elem, Limits, url, cols, parameter) {
    console.log(parameter)
    pageCurrs = Object.values(Page[0])[0];
    pageSizes = Object.values(Page[0])[1];

    var URL = SplicIng(Page, url, parameter);
    layui.use('table', function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            laypage = layui.laypage,
            $ = layui.$;

        var option = {
            elem: '#' + elem[0]
            , url: URL
            , type: 'post'
            , loading: true
            , cols: cols
            , done: function (data, curr, count) {
                laypage.render({
                    elem: elem[1]
                    , count: count
                    , curr: pageCurrs
                    , limit: pageSizes
                    , limits: Limits
                    , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                    , jump: function (obj, first) {
                        if (!first) {
                            pageCurrs = obj.curr;
                            pageSizes = obj.limit;
                            Page[0][Object.keys(Page[0])[0]] = pageCurrs;
                            Page[0][Object.keys(Page[0])[1]] = pageSizes;
                            var URL = SplicIng(Page, url, parameter);
                            option.url = URL;
                            RenderTable(option);
                        }
                    }
                });
            }
        };

        RenderTable(option);
    });
}

function RenderTable(option) {
    layui.use('table', function () {
        var table = layui.table;

        table.render(option);
    });
}

function SplicIng(Page, url, parameter) {
    var Parm = [];
    var Array = [];
    console.log(parameter)
    var PageParmentName = [];
    var PageParmentValue = [];

    for (var i = 0; i < Page.length; i++) {
        for (var key in Page[i]) {
            PageParmentName.push(key);
            PageParmentValue.push(Page[i][key]);
        }
    }

    for (var i = 0; i < parameter.length; i++) {
        for (var key in parameter[i]) {
            Parm.push(key);
            Array.push(parameter[i][key]);
        }
    }
   
    var URL = url + "?";

    for (var i = 0; i < PageParmentName.length; i++) {
        Parm.length > 0 ? URL += PageParmentName[i] + '=' + PageParmentValue[i] + '&' : URL += PageParmentName[i] + '=' + PageParmentValue[i];
    }

    for (var i = 0; i < Parm.length; i++) {
        i + 1 == Parm.length ? URL += Parm[i] + '=' + Array[i] : URL += Parm[i] + '=' + Array[i] + '&';
    }
    console.log(URL)
    return URL;
}

总结

以上就是Layui中表格渲染的简化写法了，如果感兴趣，可以复制去体会😀