layui 如何在渲染table前处理数据 - Meou~ - 博客园

最近在用layui开发管理系统，果然是“累”ui

实现功能：将之前选择的选项勾选，渲染备注信息（原数据为空的列）

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

table 渲染前修改数据，需要用ajax

---

$.ajax({
    url: "/product/showProduct",
    type: "GET",
    dataType: 'json',
    success: function (res) {
		//数据处理
        for (var item in res.datas) {
            renderInfo(res.datas[item], idList, amountList, remarksList);
        }

        table.render({
            elem: '#test'
            // ,skin: 'nob' //无边框风格
            , toolbar: '#toolbarDemo'
            , title: '产品数据表'
            // , totalRow: true
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {
                    field: 'id',
                    title: 'ID',
                    width: 80,
                    fixed: 'left',
                    unresize: true,
                    cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    sort: true,
                    totalRowText: '合计'
                }
                    , {field: 'productName', title: '功能模块'}
                ]
            ]
            , data: res.datas
            // , page: true  //是否显示分页

        });
    }
});

table渲染后修改数据，layui提供done方法

---

table.render({
    elem: '#test'
    // ,skin: 'nob' //无边框风格
    , url: '/product/showProduct'
    , toolbar: '#toolbarDemo'
    , title: '产品数据表'
    , response: {
        // countName: 'count',
        dataName: 'datas' //规定数据列表的字段名称，默认：data
    }
    // , totalRow: true
    , cols: [
        [
            {type: 'checkbox', fixed: 'left'}
            , {
            field: 'id',
            title: 'ID',
            width: 80,
            fixed: 'left',
            unresize: true,
            cellMinWidth: 80 ,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            sort: true,
            totalRowText: '合计'
        }
            , {field: 'productName', title: '功能模块'}
        ]
    ],
    // , page: true  //是否显示分页

    // done: function(res, curr, count){//  done模板
    //     //如果是异步请求数据方式，res即为你接口返回的信息。
    //     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    //     console.log(res.datas);
    //
    //     //得到当前页码
    //     console.log(curr);
    //
    //     //得到数据总量
    //     console.log(count);
    // }

    done: function (res, curr, count) {//修改totalRow时刚好用到了done
                $(".layui-table-total div").each(function (i,item) {
                    var div_text = $(item).html();
                    if(div_text != ""&&div_text != '合计') {
                        $(item).html(total);
                    }
                });

            }
});