layui 页面的嵌套_基于Layui table返回的值的多级嵌套的解决方法_柠浓_前端开发者...

在使用layui的table组件时,遇到服务器返回的多级嵌套数据无法直接解析的问题。通过创建searchData函数,可以处理嵌套数据,将多级结构转化为table组件能识别的形式。具体实现包括对响应数据的解析、转换,并在table.render中设置正确的dataName和countName,从而成功处理多级嵌套的数据。
摘要由CSDN通过智能技术生成

我在学习layui的过程中遇到了table返回值的问题,如果服务器端返回给你的数据是多级嵌套的话,那你在前台是解析不了的,在table.

data = res[options.response.dataName] || []

这个意味着它源码不支持嵌套数据

举个例子把 比如服务器端返回的数据中data>dataList>list

把这个数据返回给前段解析出来的是 res[data.dataList.list]类似这种的结构,当然解析不了,所以我写了一个方法处理返回的数据

function searchData(response,res,name){

var data = new Object();

var arr = response[name].split("/"),

pre = arr[0];

data[pre] = res[pre];

for(var i = 1;i

if(arr[i]){

var next = arr[i];

data[pre] = data[pre][next];

}

}

然后再table.

try{

countNameInfo = response.countName;

dataNameInfo = response.dataName;

//console.log(options.response)

res.newcountName = searchData(response,res,“countName”);

res.newdataName =

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 中,可以通过 `cols` 参数来设置表格的列配置,包括表头和数据列的配置。在 `cols` 中,可以通过嵌套对象来实现多级表头的配置。 下面是一个示例代码: ```javascript layui.use(['table'], function(){ var table = layui.table; table.render({ elem: '#test', cols: [ [ {field: 'id', rowspan: 2, title: 'ID'}, {field: 'username', rowspan: 2, title: '用户名'}, {field: 'sex', rowspan: 2, title: '性别'}, {title: '联系方式', colspan: 2}, {title: '其它信息', colspan: 3} ], [ {field: 'email', title: '邮箱'}, {field: 'phone', title: '手机'}, {field: 'address', title: '地址'}, {field: 'ip', title: 'IP'}, {field: 'remark', title: '备注'} ] ], data: [ {id: 1, username: '张三', sex: '男', email: 'zhangsan@qq.com', phone: '13812345678', address: '北京市', ip: '192.168.1.1', remark: '无'}, {id: 2, username: '李四', sex: '女', email: 'lisi@qq.com', phone: '13987654321', address: '上海市', ip: '192.168.1.2', remark: '无'} ] }); }); ``` 在上面的代码中,通过 `cols` 参数设置了一个多级表头,包括两行表头和五列数据列。其中,第一行表头包括了三个单元格和两个多列单元格,第二行表头包括了五个单元格。 在单元格的配置中,可以通过 `rowspan` 和 `colspan` 属性来设置单元格所占的行数和列数。如果一个单元格同时设置了 `rowspan` 和 `colspan`,则它将会占据多行多列。 除了多级表头之外,还可以通过 `fixed` 属性来设置固定列和固定表头。具体的用法可以参考 layui 的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值