渲染多级表头

1、最近，在作业里面遇到了多级表头的渲染，我还傻傻地用了两个渲染表格，后来让我在Layui里面发现了可以渲染多级表头的方法，下面就让我们来学习一下吧，下图是需要实现的效果。

 

2、要实现上面的两个表头的渲染其实也不困难，多级的表头其实也就只有两个重要的值，把这两个重要的值写出来，那么多级表头也就出来了。多级表头的渲染也和一个表头的渲染很相似，首先也是先要声明全局变量，然后才可以使用，在多级表头里面两个参数的重要性：colspan即横跨的单元格数，这种情况下不用设置field和width；另一个是rowspan即纵向跨越的单元格数。这两个值决定了表格是否为多级表头

$(function () {

            layui.use(['layer', 'table'], function () {

                layuiTable = layui.table;

                layer = layui.layer,

                tabResComeMes = layuiTable.render({

                    elem: '#tabResComeMes',

                    url: '/PurManger/ResCome/SelectSessImportStudent',

                    cols: [[ //标题栏

               { align: 'center', title: '批次信息', colspan: 6 }

              , { align: 'center', title: '药品信息', colspan: 4 }

                    ], [

             { field: 'MedicineBath', title: '批号' },

             { field: 'MedicineNum', title: '药品编号'},

             { field: 'MedName', title: '药品名称', },

             { field: 'MedicineSpecificat', title: '规格'},

             { field: 'ResComeCount', title: '库存数'},

             { field: 'MedicineUnit', title: '单位'},

             { field: 'MedCost', title: '买入价'},

             { field: 'MedCostMany', title: '买入金额'},

             { field: 'MedPrice', title: '零售价'},

             { field: 'MedPriceMon', title: '零售金额' },

             { field: 'setRemoveButton', title: '操作', templet: setRemoveButton },

                    ]]

                , page: {

                    limit: 5,//指定每页显示的条数

                    limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项

                }, //开启分页

                });

                //监听行单击事件（单击事件为：rowDouble）

                layuiTable.on('edit(tabResComeMes)', function (obj) {

                    var data = obj.data;

                    rowdata = data;

                    editvalue = true;

                });

            });

        })

 

3、上面就是渲染多级表头的代码。效果如下：