关于数据表格的获取数据

提问 未结 11 244
平凡丶先森
悬赏:50飞吻
版本:layui 2.x 浏览器:gogle
{
"code": 0,
"msg": "",
"count": 300,
"data":[
{"resource_name":"紫原标题1","resource_describe":"描述1","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包1","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具1","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题2","resource_describe":"描述2","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包2","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具2","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题3","resource_describe":"描述3","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包3","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具3","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题4","resource_describe":"描述4","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包4","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具4","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题5","resource_describe":"描述5","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包5","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具5","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题6","resource_describe":"描述6","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包6","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具6","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题7","resource_describe":"描述7","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包7","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具7","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题8","resource_describe":"描述8","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包8","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具8","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题9","resource_describe":"描述9","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包9","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具9","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题10","resource_describe":"描述10","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集包10","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具10","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题11","resource_describe":"描述11","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包11","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具11","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题12","resource_describe":"描述12","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包12","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具12","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题13","resource_describe":"描述13","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包13","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具13","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题14","resource_describe":"描述14","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包14","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具14","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题15","resource_describe":"描述15","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包15","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具15","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题16","resource_describe":"描述16","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包16","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具16","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题17","resource_describe":"描述17","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包17","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具17","rinfo_size":"6MB"}]},
{"resource_name":"紫原标题18","resource_describe":"描述18","resource_author":"Loser","resource_list":[{"rinfo_name":"win10激活工具集合包18","rinfo_size":"7MB"},{"rinfo_name":"JAVA自动配置工具18","rinfo_size":"6MB"}]}
]
}
resource_list 里面的值取不出来
回帖
  • 看文档:
    https://www.layui.com/doc/modules/table.html#async
    默认数据格式:
    {
    "code": 0,
    "msg": "",
    "count": 1000,
    "data": [{}, {}]
    }
    接口返回的数据格式并不一定都符合 table 默认规定的格式,你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式:
    table.render({
    elem: '#demp'
    ,url: ''
    ,parseData: function(res){ //res 即为原始返回的数据
    return {
    "code": res.status, //解析接口状态
    "msg": res.message, //解析提示文本
    "count": res.total, //解析数据长度
    "data": res.data.item //解析数据列表
    };
    }
    //,…… //其他参数
    });
    0 回复
  • 或者试试
    resource_list[0]
    0 回复
  • CrazyYi
    2020-2-10
    你的resource_list,是一个数组对象。你需要在parseData 中先解析下,比如转换成JSON字符串。
    0 回复
  • @CrazyYi 能说具体点吗
    0 回复
  • @莫名其妙78 不会用
    0 回复
  • @jfinal_阿明

    看看这个帖子:https://fly.layui.com/jie/50106/

    或者用模板:
      //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/testdata.json' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'resource_name', title: 'resource_name',sort: true, fixed: 'left'}
    ,{field: 'resource_describe', title: 'resource_describe',sort: true, fixed: 'left'}
    ,{field: 'resource_author', title: 'resource_author',sort: true, fixed: 'left'}
    ,{field: 'resource_list', title: 'resource_list',sort: true, fixed: 'left',templet: '<div>{{d.resource_list[0].rinfo_name}}</div>'}
    ,{field: 'resource_list', title: 'resource_list',sort: true, fixed: 'left',templet: '<div>{{d.resource_list[0].rinfo_size}}</div>'}
    ,{field: 'resource_list', title: 'resource_list',sort: true, fixed: 'left',templet: '<div>{{d.resource_list[1].rinfo_name}}</div>'}
    ,{field: 'resource_list', title: 'resource_list',sort: true, fixed: 'left',templet: '<div>{{d.resource_list[1].rinfo_size}}</div>'}
    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
    });
    0 回复
  • @CrazyYi parseData:function(data){
    return JSON.stringify(data.resouce_list);
    }

    是这样吗
    0 回复
  • CrazyYi
    2020-2-12
    @jfinal_阿明
    你这个返回的格式不符合要求。注意看官网文档的介绍: https://www.layui.com/doc/modules/table.html#async

            parseData: function (res) {
    let datas = res.data;
    $.each(datas, function (i, row) {
    // 将对象转换成字符串。【当然,这里,你可以做任何你想要的处理】
    datas[i]['resource_list'] = JSON.stringify(row['resource_list']);
    });
    res.data = datas;
    return res; // 注意:一定要返回res,或者返回类似结构的对象。这个对象里面包括 count, data, msg, code 这些参数
    },
    0 回复
  • CrazyYi
    2020-2-12
    @jfinal_阿明 再发一个截图,看的更清楚一点

    0 回复
  • CrazyYi
    2020-2-12
    @jfinal_阿明 这个好像更清晰一点

    0 回复