layui.table动态获取表头和列表数据示例

html:

<table id="demo" lay-filter="test"></table>
//表格
layui.use('table', function() {
    var table = layui.table;
    var cols = [], data = [];

    $.ajax({url:"/index.php?c=Api&a=getProductByCategory&cid={$data[0][classid]}", async: false, success:function(re){
        data = re.data;
        cols = re.cols;
    }});

    table.render({
        elem: '#demo'
        ,cols: [cols]
        ,data: data
    });

/*
    table.render({
        elem: '#demo'
        ,cols: [cols]
        ,url: '/index.php'
        ,method: 'get'
        ,where: {c:'Api',a:'getProductByCategory',cid:'{$data[0][classid]}'}
        ,request: {
          pageName: 'page' //页码的参数名称,默认:page
          ,limitName: '9999' //每页数据量的参数名,默认:limit
        }
        ,parseData: function(res){ //res 即为原始返回的数据
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.count, //解析数据长度
            "cols": res.cols, //cols
            "data": res.data //解析数据列表
          };
        }
        
        //,page: true //是否显示分页
        //,limits: [5, 7, 10]
        //,limit: 5 //每页默认显示的数量
    });
*/
});
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
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 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值