一、使用方式
二、使用代码
三、效果截图

一、使用方式

1、在表头参数 cols 里加上：colspan，rowspan，请参考文档 >>>cols - 表头参数一览表
2、cols 是个二维数组，里面的每个 一维数组 相当于一个 <tr> </tr>

二、使用代码

Demo在线调整在线示例-Layui

<script>
layui.config({version: '1629677917965' //为了更新 js 缓存，可忽略
});//加载模块
layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){//得到各种内置组件var layer = layui.layer //弹层,table = layui.table //表格//执行一个 table 实例table.render({elem: '#demo',height: 420,url: '/demo/table/user/' //数据接口,title: '用户表',page: true //开启分页
//    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档,cols: [[{field: 'username', title: '用户名', width:80, rowspan: 2},{ title: '分数',align:'center', colspan: 2},{ title: '基本信息',align:'center', colspan: 3}],[ //表头
//      {type: 'checkbox', fixed: 'left'},
//      {field:'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'experience', title: '积分', width: 90, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'sex', title: '性别', width:80, sort: true},{field: 'sign', title: '签名', width: 200},{field: 'classify', title: '职业'}
//      ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}]]});});
</script>

三、效果截图

Layui 数据表格复杂表头相关推荐

php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
Layui数据表格的引用
对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么至于插件呢,也有很多种,比如: bootstrap jquery layui ...
5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
2022-04-13 工作记录--LayUI-动态渲染数据表格的表头参数
LayUI-动态渲染数据表格的表头参数最近在项目中遇到一个需求:根据后台数据动态渲染数据表格的数据. 分析:因为LayUI数据表格的数据渲染是通过给table.render({})中的cols传值来 ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
layui数据表格某个字段不显示问题
表格是用layui数据表格的方法渲染方式渲染的大概这个样子 var table = layui.table;//执行渲染 table.render({elem: '#demo' //指定原始表格元素 ...
Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...

Layui 数据表格复杂表头

一、使用方式

二、使用代码

三、效果截图

Layui 数据表格复杂表头相关推荐

最新文章

热门文章