数据表格之多表头设置

最新推荐文章于 2025-06-03 09:06:36 发布

原创最新推荐文章于 2025-06-03 09:06:36 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在layui框架中实现数据表格的二级表头设置，关键在于合理运用`rowspan`和`colspan`属性。通过示例代码展示了如何创建一个包含商品信息及销售详情的表格，强调了`rowspan`用于定义表头跨行数，`colspan`用于定义表头跨列数。最后，提到layui的table模块支持无限表头扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据表格之多表头设置

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015、多表头

作者：梁柏源

撰写时间：2019/5/26

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

继上次如何创建数据表格，这次分享的是数据表格的一些样式，列如：多级表头。

这次分享的是多级表头里的二级表头，二级表头的创建不难，主要还是colspan以及rowspan的运用，它们就是多级表头的核心，下面先介绍一下他们：

（1）rowspan指的是表头中单元格所占的行数，比如你想要创建二级表头——rowspan：2，那么它的数值就是2，三级表头就是3。总的来说rowspan就是多级表头的前提，如果只设计colspan而不设计rowspan的话，那么你的表头就会乱掉。rowspan的数值默认为1。

（2）colspan指的是表头中单元格所占的列数，这个不好解析，稍微有点小抽象。就是一个多级表头中一个大类包含多个小类；2个小类，那么colspan的数值就是2,有多少个小类数值就是多少。colspan的数值也是默认为一的。

首先构建一个表格table,记住了啊这里的数据表格layui.table，不是layuiTable = layui.table;（这里再次强调一下）

<html>

<body>（这里那两个插件就不写了）

<div>

</div>

var dome

var layer, layuiTable;//保存layui模块以便全局使用,记得要声明

$(function () {

//方法渲染

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

//赋值

layuiTable = layui.table;

layer = layui.layer,

// 执行渲染

dome= layuiTable.render({

elem: "# dome ",//html表格id

height: 500,

url: "路径",//数据接口

cols: [[ //表头

{ type: 'numbers', title: '序号', rowspan: 2 },//序号列，title设定标题名称

{ field: 'CommodityID', title: 'CommodityID', hide: true, rowspan: 2 },//hide:true 隐藏列

{ field: 'CommodityNumber', title: '商品编码(条码)', align: 'center', rowspan: 2 },

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

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

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

{ field: 'SizeName', title: '尺码', align: 'center', rowspan: 2 },

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

{ field: 'UnitName', title: '单位', align: 'center', rowspan: 2 },

{ align: 'center', title: '销售', colspan: 2 },

{ align: 'center', title: '金额', colspan: 2 },

{ field: 'Remark', title: '备注', align: 'center', rowspan: 2 },

{ type: 'radio', title: '积分', align: 'center', rowspan: 2 }], [

{ field: 'Discount', title: '折扣', align: 'center' },

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

{ field: 'SalesPrice', title: '销售价', align: 'center'},

{ field: 'TotalMoney', title: '合计金额', align: 'center' }

]],

data: [],//加载本地数据

});

</script>

</body>

</html>

注意看rowspan，和colspan，他们之间的顺序和关系，写看二级表头代码是分两部分看，上部分和下部分，下面以以上例子为例（序号、商品编码(条码)、商品名称、款号、颜色、尺码、吊牌价、单位、销售、金额、备注、积分）这是上部分，也是本来的表头。要注意销售和金额，他们都是有colspan的；而后面的折扣、数量、销售价、合计金额没有rowspan和colspan，他们就是销售和金额里面的类。总的来说就是要包含的小分类要放到最后写。

还有table模块是支持无限表头的，可以按照以上方法无限量扩充，主要核心在于rowspan和colspan的运用。

下面来看一下，上面例子运行的结果：