导出需要获取表头和参数名的导出（接口需求）

最新推荐文章于 2025-02-25 17:03:38 发布

原创最新推荐文章于 2025-02-25 17:03:38 发布 · 406 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

第三方-layer 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种不依赖Layui内置功能的手动表格导出方法，通过JavaScript动态获取表格头部信息和参数名，实现自定义导出功能。文章详细展示了如何使用Layui的table组件结合jQuery进行数据渲染，并提供了监听单元格事件和定时任务来收集表头数据的示例代码。

前言：没有用layui的导出
导出需要获取表头和参数名的导出

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>1开始使用Layui组件</title>
		<link rel="stylesheet" href="css/layui.css">
		<style>
			.box{
				width: 400px;
				height: 400px;
				border: 1px solid #ddd;
			}
			.box table{
				height: 100%;
			}
		</style>
	</head>

	<body>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<script src="jquery-3.1.1.min.js"></script>
		<script src="layui.all.js"></script>
		<script>
			layui.use('table', function(){
			  var table = layui.table;
			  
			  table.render({
			    elem: '#test'
			    ,url:'table.json'
			    ,toolbar: '#toolbarDemo'
			    ,title: '用户数据表'
			    ,cols: [[
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
			      ,{field:'username', title:'用户名', width:120, edit: 'text'}
			      ,{field:'logins', title:'ip', width:150,event: 'emailxia',style:'cursor: pointer;color:blue',templet: function(res){
			        return '<span>'+ res.logins +'</span>'
			      }}
			      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
			      ,{field:'city', title:'城市', width:100}
			      ,{field:'sign', title:'签名'}
			      ,{field:'experience', title:'积分', width:80, sort: true}
			      ,{field:'ip', title:'IP', width:120}
			      ,{field:'logins', title:'登入次数', width:100, sort: true}
			      ,{field:'joinTime', title:'加入时间', width:120}
			      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
			    ]]
			    ,page: true
			  });
			  //监听单元格事件
			  table.on('tool(test)', function(obj){
			    var data = obj.data;
			    if(obj.event === 'emailxia'){
			    	console.log(data);
			    	if(data.logins<1){
			    		layer.msg("暂无数据",{icon:0,time:900}); 
			    		return false;
			    	}
			    	console.log('跳转');
			    }
			  });
			});
			
			setTimeout(function(){
				var arrk = [];
					arrh = [];
				$('#test').next().find('.layui-table-box>.layui-table-header th').each(function(){
					arrk.push($(this).attr('data-field'));
					arrh.push($(this).find('span').text());
				})
				arrk.shift();arrk.pop();
				arrh.shift();arrh.pop();
				console.log(arrk);
				console.log(arrh);
			},1000)
           
		})






//		serdata.headers=[];
// 		serdata.fields=[];
//		$('#test').next().find('.layui-table-box>.layui-table-header th').each(function(){
//			serdata.headers.push($(this).find('span').text());
// 			serdata.fields.push($(this).attr('data-field'));
//		})
//		console.log(serdata);
//windowOpen(url+'baseDataManage/exportVillageBaseNew',withindata)
		</script>

	</body>

</html>