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文档。