Layui表格的扩展

开发工具与关键技术：MVC layui表格

作者：盘洪源

撰写时间：2019年5月27日星期一

在做项目的时候需要用到动态数据表格的时候很多，用layui的数据表格就非常方便了，layui里面有自定义表格和数据表格，数据表格用起来也很简单。首先就是开始的渲染，这个渲染又分方法渲染和自动渲染，一般用的是方法渲染，在这个方法渲染的表格里的属性很多，样式多，但很多人不知道怎么用，比如说什么多级表头、表头样式等等。

在方法渲染里的表格只有设置表格的尺寸，通过一个size的属性来设置表格的大小尺寸，但这找不到有属性是可以修改数据表格的行高和字体大小的，这个应该不能通过属性来设置，可以通过找到表格的class类给class改变值就行，如下：

    .layui-table-cell{

 

            height:10px;

            font-size:10px;

            line-height: 10px;

 

        }

这是改变行的高度和行高和字体大小。

这里说一下多级表头的使用，主要是表头属性这里的改变，其他没有变化，很简单：

cols: [[

                        { type: 'numbers',
title: '', rowspan: 2 },

                        { field: '', title: '款号', align: 'center', rowspan: 2, width: 100 },

                        { field: '', title: '商品名称', align: 'center', rowspan: 2, width: 250 },

                        { field: '', title: '颜色', align: 'center', rowspan: 2 },

                        { field: '', title: '吊牌价', align: 'center', rowspan: 2 },

                        { align: 'center',
title: '小计', colspan:
2 }

                    ], [

                        { field: '', title: '总数量', align: 'center' },

                        { field: '', title: '总金额', align: 'center', width: 130 },

                    ]],

这个实现的效果是如下图：

这个cols就是初始化表格里的创建表头数据的属性，主要是在数据的每一列给他添加了属性。

这里面主要用到2个属性，colspan和rowspan，colspan这个代表的是代表的是单元格所占列数，就比如说上面这个例子，这个是一个二级表头，款号、商品名称、颜色、吊牌价这个几个所占的行数就是2，这是对应着右边这个二级表头这里。而总数量和总金额和小计这三个所占行数就是1了，不同的就是小计的所占列数不是一而是二，因为小计包括着下面这两个字段，就是说上面这个包括着几个字段列数就是几列，需要注意的是被包括的字段放的位置就有所改变，详情请看上面代码块。

这只是一个简单的二级表头的例子，其他的三级表头等等都是差不多的意思，都是围着colspan和rowspan这2个属性改变值就可以了。其他详情请参考layui文档。