layui的空行格

样式如下

layui的空行格_第1张图片

这里我进行修改了layui的样式

空行的实现

js代码
// ---------------------------------------------    LaYui默认为空数据    ----------------------------------------------------
function tableDefaultNull(id, limit) {
    let $thead = $(id).next().find(".layui-table-box").find(".layui-table-header").find("table").find("thead").find("tr");
    let $tbody = $(id).next().find(".layui-table-box").find(".layui-table-body.layui-table-main").find("table").find("tbody");
    let count = $tbody.children("tr").length;
    let sl = $thead.children("th").length;
    if (count <= 0) {
        return;
    }
    for (let i = 0; i < limit - count; i++) {
        let str = "";
        for (let j = 0; j < sl; j++) {
            if (j == 0) {
                str = str + "
"
; } else { str = str + ""; if (j == sl - 1) { str = str + ""; } } } $tbody.append(str); } }
layui代码
table.render({
                elem: '#test'
                , url: '/a/a/' + layer2id
                , cols: [[
                    {title: '序号', type: 'numbers'},
                    {field: 'name',align:"center",width:"20%", title: '名称'},
                    {field: 'pname',width:"20%",align:"center", title: '联系人
'},
                    {field: 'phone', title: '电话'},
                     {field: 'areai', title: '所属区域'},
                      {field: 'aream', title: '地址'},
                       {field: 'typename', title: '种类名称'},
                    {align:"center",title: '操作', toolbar: '#barDemo'}
                ]],
                done: function (res, curr, count) { // done:function()方法在加载完成时回调,用jquery修改样式.
                    tableDefaultNull("#test",10);	//第一个参数是找table元素,第二个是每页几条数据可以用table.config.limit
                }
                , page: true
                , height: 473	//高度必须设置
            });

你可能感兴趣的:(layui,table)