layui 复杂表头和table底部自定义显示数据

layui 复杂表头和table底部自定义显示数据

一.设置多表头clos
加星号的是注意项

  let bottomcols = [
        [{
            **field: 'title',**
            colspan: 4

        }],
        [{
            **field: 'Basic_information',**
            colspan: 4

        }],
        [{
            title: '申领库房',
            field: 'STORAGE',
            align: 'center'


        }, {

            title: '类别',
            field: 'EXP_FORM ',
            align: 'center'

        },
        {

            title: '进货金额',
            field: 'PURCHASE_COSTS',
            align: 'center'

        }, {

            title: '零售金额',
            field: 'RETAIL_COSTS',
            align: 'center'

        }]]

二,

 table.render({
                elem: '#form-table',
                id: 'section',
                url: '/admin/data/sectionExportRecord.json',
                cols: bottomcols,
                cellMinWidth: 100,
                height: 'full-210',
                toolbar: '#form-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                **done: function (res, curr, count) {
                    exportData = res.data; 		//获取表格中的数据集合。
                    $("th[data-field='Basic_information']").html("<div style='margin: 6px;' align='center'>" +
                        "<div style = 'float: left;'> <span> 库房:" +"测试库房"+"</span></div >" +
                        "<div> <span >" + TIME_QUANTUM + "</span></div>" +
                        " </div >")
                    $("th[data-field='title']").html("<div align='center'><span>库房申领情况汇总表</span></div>");**

                }
            });

记得开启统计 totalRow: true

            table.render({
                elem: '#form-table',
                id: 'section',
                url: '/admin/data/sectionExportRecord.json',
                cols: cols,
                totalRow: true,
                cellMinWidth: 100,
                height: 'full-145',
                toolbar: '#form-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                done:function(res){
                    $("div[class='layui-table-total']").find("[data-field='UNITS']").html("<div class='layui-table-cell laytable-cell-3-0-4'>123</div>");
                }
            });