layui 数据表格下拉框_layui数据表格动态多级表头

最新推荐文章于 2024-05-30 11:05:59 发布

杀鼠狂魔猪尾草

最新推荐文章于 2024-05-30 11:05:59 发布

阅读量245

点赞数

文章标签： layui 数据表格下拉框

本文链接：https://blog.csdn.net/weixin_33463850/article/details/112428754

版权

本文介绍了如何使用layui库创建带有下拉框的动态多级表头。通过HTML和JS代码示例展示了具体实现过程，并提供了模拟的Json数据作为示例。

摘要由CSDN通过智能技术生成

layui数据表格多级表头后台数据格式是怎样的 - Fly社区fly.layui.com

实现常用两级表头：

html;

<div class="layui-colla-item">
    <h2 class="layui-colla-title">转班记录</h2>
    <div class="layui-colla-content layui-form-item layui-show">
        <table class="layui-table" id="transferList" lay-filter="transferList">	        	
        </table>
    </div>
</div>

js;

/*转班记录*/
cols = [
        [
		    {type: 'checkbox', fixed: 'left', rowspan:2},
		    {title: '转班学期',field:'field1', width:120, rowspan:2},
	 		{title: '转班前', align:'center', colspan:4},
	 		{title: '转班后', align:'center', colspan:4},
	 		{title: '转班原因',field:'field12', width:120, rowspan:2},
	 		{title: '操作', width: 120, toolbar:'#layerToolbar', rowspan:2}
	 	],
	 	[
			{title: '项目部',field:'field3', width:120},
			{title: '专业',field:'field4', width:120},
			{title: '年级',field:'field5', width:120},
			{title: '班级',field:'field6', width:120},
			{title: '项目部',field:'field7', width:120},
			{title: '专业',field:'field8', width:120},
			{title: '年级',field:'field9', width:120},
			{title: '班级',field:'field10', width:120},
 		 ]
 	 ]
	var transferList = table.render({
	            elem: '#transferList' //指向存放分页的容器
	            ,cols:cols //表头
	            ,page: false //是否显示分页
	            ,toolbar:toolbar //开启工具栏
	            ,limit: 1000 //每页默认显示的数量
		    ,defaultToolbar:[]
			,data:[]
	    });

效果；

模拟Json;

/*转班记录*/
var data =[{
		'field1':'转班学期1',
		'field2':'转班原因1',
		'field3':'前项目部1',
		'field4':'前专业1',
		'field5':'前年级1',
		'field6':'前班级1',
		'field7':'后项目部1',
		'field8':'后专业1',
		'field9':'后年级1',
		'field10':'后班级1'
	}];