数据表格之多表头设置

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

开发工具与关键技术：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的运用。

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

数据表格之多表头设置相关推荐

Kibana数据表格
Kibana数据表格初步使用目录 Kibana数据表格初步使用 1 设置索引模式 2 Discover 3 可视化表格 4 权限配置 4.1 角色配置 4.2 创建用户 5 其他配置 5.1 默认筛 ...
node 根据xlsx表格数据，批量生成表格文件，并且设置样式和行高
假如我们有这么一个数据的表格文件任务目标就是根据数据1的字段相同的每条的数据,去生成一个表格文件(数据1的值为1的全放一个表格文件里,数据1的值为2的放下一个文件里,以此类推) 下面先来进行准备 ...
layui 表格在点表头排序时数据错乱
layui 表格在点表头排序时数据错乱问题问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回 ...
2022-04-13 工作记录--LayUI-动态渲染数据表格的表头参数
LayUI-动态渲染数据表格的表头参数最近在项目中遇到一个需求:根据后台数据动态渲染数据表格的数据. 分析:因为LayUI数据表格的数据渲染是通过给table.render({})中的cols传值来 ...
设置数据表格的各种功能
开发工具与关键技术:Visual Studio + C# + Layui 撰写时间:2019.6.27 在我们使用Layui table数据表格的时候,经常会遇到各种各样的需求功能,用于对表格进行一些 ...
如何设置excel表格表头冻结_excel表格怎样让表头固定不动，看完就明白了
在做数据统计时,如果数据较多,超过了电脑显示的页面,就要往下拉,在往下拉的同时,表头就无法显示:或者同一张数据表,要打两页的时候,第二表就会无法显示表头,那么如何让excel表格的表头固定不动?下面教 ...
WPS：Excel数据表格查询定位技巧之如何设置加重颜色的十字定位(定位数据更加一目了然)
WPS:Excel数据表格查询定位技巧之如何设置加重颜色的十字定位(定位数据更加一目了然) 目录 Excel数据表格查询定位技巧之如何设置加重颜色的十字定位 Excel数据表格查询定位技巧之如何设置加 ...
layui修改table中的按钮_layui数据表格中如何设置按钮切换（是否置顶）与分页居中...
手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶 {{# if(d.order>0){ }} 取消 {{ ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...

数据表格之多表头设置

数据表格之多表头设置相关推荐

最新文章

热门文章