layui 借助 parseData 回调函数解析table 组件所规定的数据格式

最新推荐文章于 2023-11-03 00:40:36 发布

原创最新推荐文章于 2023-11-03 00:40:36 发布 · 1.5w 阅读

13 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在layui的table组件中自定义数据格式，通过一个具体示例展示了如何解析后台返回的数据，并将其转换为适合展示的格式。重点讲解了parseData函数的使用，以及如何在done回调中处理额外的信息。

table表数据内容操作，有时后台返回的数据格式不是所需要的数据格式，在layui table中需要自己定义所需要的数据格式；

可参考layui文档：https://www.layui.com/doc/modules/table.html

举个例子：代码实现如下：

table.render({
            elem: '#itemslist',
            url:'XXXXXXXXX',
            id:'itemslist',
            title: '关联客户信息',
            where:where,
            page:false,
            cols: [[
                {field: 'name', title: '客户', minWidth: 210,width: 180,height:60, align: 'left'},
                {field: 'total', title: '数量', minWidth: 120,width: 140,align: 'left'},
                {field: 'unit_name', title: '商品单位', minWidth: 120,width: 160,align: 'left'},
                {field: 'address', title: '地址', minWidth: 120,width: 260,align: 'left'},
                {field: 'remark', title: '备注', minWidth: 120, align: 'left'},
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.items.length, //解析数据长度
                    "data": res.data.items //解析数据列表
                };
            },
            done:function (res, curr, count) {
                var info = res.data.Order;
                if(info.item_title){
                   $("#item_title").html(info.item_title);
                }
            }
        });