LayUI动态添加table表格

27 篇文章 1 订阅

1.需要的数据格式

        var productdata = "";
        var list = [
          //{ field: "Week1", title: "Week7", align: 'center', width: 100 },
         //{ field: "Week1", title: "Week7", align: 'center', width: 100 },
        ];

2.请求数据,进行动态填充

    $.ajax({
            url: '../../Controller/NProductionLine/NProductionLineController.ashx', //模拟接口
            type: "post",
            data: { action: "Month" },
            dataType: "json",
            async: false,
            success: function (res) {
                if (res.code == 0) {
                    var str = "Apr"
                    productdata = res.data[0];
                    $.each(productdata, function (index) {
                        for (var i = 0; i < productdata[index].length; i++) {
                            //开始组装表头
                            list.push({ field: "Week" + productdata[index][i], title: productdata[index][i], align: 'center', width: 100 });
                        }
                    });
                }
            }
        })
   //管理员管理
        table.render({
            elem: '#LAY-app-content-list'
          , url: '../../Controller/NProductionLine/NProductionLineController.ashx' //模拟接口
          , cols: [[
              { field: 'Product', width: 200, title: 'PRODUCT', rowspan: 2, }
            , { field: 'FgPartNo', width: 200, title: 'FG Part No', rowspan: 2, }
            , { field: 'Items', width: 200, title: 'FW', rowspan: 2, }
            , { field: 'Inventory', width: 200, title: 'Inv', rowspan: 2, }
            , { field: 'Jan', title: 'Jan', align: 'center', colspan: productdata.Jan.length }
            , { field: 'Feb', title: 'Feb', align: 'center', colspan: productdata.Feb.length }
            , { field: 'Mar', title: 'Mar', align: 'center', colspan: productdata.Mar.length }
            , { field: 'Apr', title: 'Apr', align: 'center', colspan: productdata.Apr.length }
            , { field: 'May', title: 'May', align: 'center', colspan: productdata.May.length }
            , { field: 'Jun', title: 'Jun', align: 'center', colspan: productdata.Jun.length }
            , { field: 'Jul', title: 'Jul', align: 'center', colspan: productdata.Jul.length }
            , { field: 'Aug', title: 'Aug', align: 'center', colspan: productdata.Aug.length }
            , { field: 'Sep', title: 'Sep', align: 'center', colspan: productdata.Sep.length }
            , { field: 'Oct', title: 'Oct', align: 'center', colspan: productdata.Oct.length }
            , { field: 'Nov', title: 'Nov', align: 'center', colspan: productdata.Nov.length }
            , { field: 'Dec', title: 'Dec', align: 'center', colspan: productdata.Dec.length }
            , { field: 'Total', title: '合计', align: 'center', sort: 'true', rowspan: 2, width: 100 }
          ], list],
            method: 'POST',
            where: { action: "List" },
            request: {
                pageName: 'Page', //页码的参数名称
                limitName: 'PageSize' //每页数据量的参数名
            },
            done: function (res, curr, count) {
                this.cols = []; //(关键代码)将cols初始化,否则表格重载时无法正确重新渲染表头
            }
        , page: false
        , limit: 1000
        , limits: [1000, 2000, 3000, 4000, 5000]
        , text: {
            none: '暂无相关数据'
        }
        });

4.table表格重载时出现错误,有个是未初始化table元素,添加以下代码:

    var $table = table.render();
        执行重载
        $table.reload('LAY-app-content-list', { cols: [colsnew, list] })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值