layui数据表格重载与导出

以你之姓@ 2023-06-24 13:27 27阅读 0赞

数据表格

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>电脑查询</title>
    		<link rel="stylesheet" href="static/tableExport/css/layui.css" media="all" />
    		<script type="text/javascript" src="static/tableExport/layui.js"></script>
    	</head>
    	<body style="margin-left: 20px; margin-right: 20px; margin-top: 10px">
    		<div class="demoTable">
    			<div class="layui-inline">
    				<input class="layui-input" id="pcNumber" autocomplete="off" placeholder="电脑编号">
    			</div>
    			<div class="layui-inline">
    				<input class="layui-input" id="companyName" autocomplete="off" placeholder="公司名称">
    			</div>
    			<div class="layui-inline">
    				<input class="layui-input" id="deptName" autocomplete="off" placeholder="部门名称">
    			</div>
    			<div class="layui-inline">
    				<input class="layui-input" id="user" autocomplete="off" placeholder="使用人">
    			</div>
    			<div class="layui-inline">
    				<input class="layui-input" id="remarks" autocomplete="off" placeholder="备注">
    			</div>
    			<button class="layui-btn" data-type="reload">查询</button>
    		</div>
    		<table class="layui-hide" id="demo" lay-filter="test"></table>
    		<script type="text/html" id="toolbarDemo">
    			<div class="layui-row">
            <div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="text-align: left;padding-left: 10px;">
                <div class="layui-input-inline yutons-btn-margin-right">
                   <span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="table_export">导出</span>
                </div>
            </div>
            <div class="layui-col-md10 layui-col-sm9 layui-col-xs6" style="text-align: right;">            
                <div class="layui-input-inline yutons-btn-margin-right" style="margin-right: 0px;">
    				<span class="layui-inline yutons-header-tool" title="筛选列" lay-event="LAYTABLE_COLS">
    							<i class="layui-icon layui-icon-cols"></i></span>
    				<span class="layui-inline yutons-header-tool" title="打印" lay-event="LAYTABLE_PRINT">
    							<i class="layui-icon layui-icon-print"></i>
    				</span>
                </div>
            </div>
        </div>
    </script>
    		<script>
    			layui
    				.config({
    					base : 'static/layui_exts/'
    				})
    				.use(
    						[ 'table', 'excel' ],
    						function() {
    							var table = layui.table //表格
    							, $ = layui.$, excel = layui.excel;
    
    							//执行一个 table 实例
    							table.render({
    								elem : '#demo',
    								url : 'getPcList', //数据接口
    								title : '用户表',
    								page : true, //开启分页
    								toolbar : '#toolbarDemo', //操作1:启用自定义模板表格头部工具栏
    								defaultToolbar : [], //操作2:隐藏头部工具栏右侧的图标
    								cols : [ [ //表头
    								{
    									type : 'checkbox',
    									fixed : 'left'
    								}, {
    									type : 'numbers',
    									title : '序号',
    								}, {
    									field : 'pcNumber',
    									title : '电脑编码',
    									width : 120
    								}, {
    									field : 'companyName',
    									title : '公司',
    									width : 250,
    								}, {
    									field : 'deptName',
    									title : '部门',
    									width : 120
    								}, {
    									field : 'user',
    									title : '使用人',
    									width : 100
    								}, {
    									field : 'childrenName',
    									title : '分类',
    									width : 100
    								}, {
    									field : 'number',
    									title : '数量'
    								}, {
    									field : 'outStockDate',
    									title : '使用日期',
    									width : 120
    								}, {
    									field : 'chipset',
    									title : '主板',
    									width : 150
    								}, {
    									field : 'cpu',
    									title : 'cpu',
    									width : 150
    								}, {
    									field : 'ram',
    									title : '内存',
    									width : 150
    								}, {
    									field : 'disk',
    									title : '硬盘',
    									width : 150
    								}, {
    									field : 'solidity',
    									title : '固态',
    									width : 150
    								}, {
    									field : 'gpu',
    									title : '显卡',
    									width : 150
    								}, {
    									field : 'display',
    									title : '显示器',
    									width : 150
    								}, {
    									field : 'systemName',
    									title : '操作系统',
    									width : 150
    								}, {
    									field : 'hostName',
    									title : '计算机名',
    									width : 100
    								}, {
    									field : 'ip',
    									title : 'ip',
    									width : 150
    								}, {
    									field : 'mac',
    									title : 'mac',
    									width : 150
    								}, {
    									field : 'serialNumber',
    									title : 'SN',
    									width : 150
    								}, {
    									field : 'remarks',
    									title : '备注',
    									width : 150
    								}, {
    									fixed : 'right',
    									title : '操作',
    									toolbar : '#barDemo',
    									width : 220
    								} ] ],
    
    								limit : 15//每页默认显示的数量	
    							});
    
    							//监听头工具栏事件
    							table
    									.on(
    											'toolbar(test)',
    											function(obj) {
    												var checkStatus = table
    														.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据
    												switch (obj.event) {
    												case 'table_export':
    													exportFile('demo')
    													break;
    												}
    												;
    											});
    							var $ = layui.$, active = {
    								reload : function() {
    									var pcNumber = $('#pcNumber').val();//获取输入框的值
    									var companyName = $('#companyName').val();//获取输入框的值
    									var deptName = $('#deptName').val();//获取输入框的值
    									var user = $('#user').val();//获取输入框的值
    									var remarks = $('#remarks').val();//获取输入框的值
    
    									//执行重载
    									table.reload('demo', {
    										page : {
    											curr : 1
    										//重新从第 1 页开始
    										},
    										where : {
    											pcNumber : pcNumber,
    											companyName : companyName,
    											deptName : deptName,
    											user : user,
    											remarks : remarks
    										},
    										url : 'getComputerQuery'//后台做模糊搜索接口路径
    										,
    										method : 'post'
    									}, 'data');
    								}
    							};
    
    							//监听行工具事件
    							table.on('tool(test)', function(obj) {
    								var data = obj.data;
    								//console.log(obj)
    								if (obj.event === 'del') {
    									layer.confirm('确定要删除吗？', {
    										btn : [ '确定', '取消' ]
    									}, function() {
    										location.href = "deleteParts?partsId="
    												+ data.partsId; //加入这个信息点击确定 会关闭这个消息框					    	 
    									}, function() {
    										layer.closeAll('dialog'); //加入这个信息点击确定 会关闭这个消息框
    										layer.msg("取消了");
    									});
    								} else if (obj.event === 'edit') {
    									layer.open({
    										type : 2,
    										title : '编辑',
    										shadeClose : true,
    										shade : false,
    										maxmin : true, //开启最大化最小化按钮
    										offset : '100px',
    										area : [ '800px', '600px' ],
    										content : 'getComputer?id=' + data.id
    									});
    								} else if (obj.event === 'move') {
    									layer.open({
    										type : 2,
    										title : '编辑',
    										shadeClose : true,
    										shade : false,
    										maxmin : true, //开启最大化最小化按钮
    										offset : '100px',
    										area : [ '800px', '600px' ],
    										content : 'addMove?id=' + data.id
    									});
    								} else if (obj.event === 'scrap') {
    									layer.open({
    										type : 2,
    										title : '编辑',
    										shadeClose : true,
    										shade : false,
    										maxmin : true, //开启最大化最小化按钮
    										offset : '100px',
    										area : [ '800px', '600px' ],
    										content : 'addScrap?id=' + data.id
    									});
    								}
    							});
    							$('.demoTable .layui-btn').on('click', function() {
    								var type = $(this).data('type');
    								active[type] ? active[type].call(this) : '';
    							});
    							/**
    							 * by yutons
    							 * Array.from() 非常方便的将一个类数组的集合 ==》 数组，直接使用数组身上的方法。例如：常用的map，foreach… 
    							 * 但是，问题来了，IE不识别Array.from这个方法。所以写了它兼容IE的写法。
    							 */
    							if (!Array.from) {
    								Array.from = function(el) {
    									return Array.apply(this, el);
    								}
    							}
    							//表格导出
    							function exportFile(id) {
    								//根据传入tableID获取表头
    								var headers = $(
    										"div[lay-id=" + id
    												+ "] .layui-table-box table")
    										.get(0);
    								var htrs = Array.from(headers
    										.querySelectorAll('tr'));
    								var titles = {};
    								for (var j = 0; j < htrs.length; j++) {
    									var hths = Array.from(htrs[j]
    											.querySelectorAll("th"));
    									for (var i = 0; i < hths.length; i++) {
    										var clazz = hths[i]
    												.getAttributeNode('class').value;
    										if (clazz != ' layui-table-col-special'
    												&& clazz != 'layui-hide') {
    											//排除居左、具有、隐藏字段
    											//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
    											titles['data-field' + i] = hths[i].innerText;
    										}
    									}
    								}
    								//根据传入tableID获取table内容
    								var bodys = $(
    										"div[lay-id=" + id
    												+ "] .layui-table-box table")
    										.get(1);
    								var btrs = Array.from(bodys
    										.querySelectorAll("tr"))
    								var bodysArr = new Array();
    								for (var j = 0; j < btrs.length; j++) {
    									var contents = {};
    									var btds = Array.from(btrs[j]
    											.querySelectorAll("td"));
    									for (var i = 0; i < btds.length; i++) {
    										for ( var key in titles) {
    											//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
    											var field = 'data-field' + i;
    											if (field === key) {
    												//根据表头字段获取table内容字段
    												contents[field] = btds[i].innerText;
    											}
    										}
    									}
    									bodysArr.push(contents)
    								}
    								//将标题行置顶添加到数组
    								bodysArr.unshift(titles);
    								//导出excel
    								excel.exportExcel({
    									sheet1 : bodysArr
    								}, '计算机列表' + new Date().toLocaleString()
    										+ '.xlsx', 'xlsx');
    							}
    						});
    	</script>
    		<script type="text/html" id="barDemo">
    			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="move">调拨</a>
    		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="scrap">报废</a>
    		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    	</script>
    	</body>
    </html>

页面效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70][]

重载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70 1][]

后端接口

/itmanage/src/main/java/com/chief/itmanage/controller/ComputerController.java

//动态查询
    	@RequestMapping("getComputerQuery")
    	@ResponseBody
    	public String getComputerQuery(String pcNumber,String companyName,String deptName,
    		String user,String remarks,int page, int limit) {						
    		int count=0;
    		List<Computer> list=new ArrayList<Computer>();
    		if(!pcNumber.equals("")) {
    			list=computerService.getPcByPcNumber(pcNumber,(page-1)*limit, limit);
    			count=computerService.getCountByPcNumber(pcNumber);
    		}else if(!companyName.equals("")) {
    			list=computerService.getPcByCompanyName(companyName,(page-1)*limit, limit);
    			count=computerService.getCountByCompanyName(companyName);
    		}else if(!deptName.equals("")) {
    			list=computerService.getPcByDeptName(deptName,(page-1)*limit, limit);
    			count=computerService.getCountByDeptName(deptName);
    		}else if(!user.equals("")) {
    			list=computerService.getPcByUser(user,(page-1)*limit, limit);
    			count=computerService.getCountByUser(user);
    		}else if(!remarks.equals("")) {
    			list=computerService.getPcByRemarks(remarks,(page-1)*limit, limit);
    			count=computerService.getCountByRemarks(remarks);
    		}else {
    			count = computerService.count();
    			list = computerService.getComputerList((page-1)*limit, limit);
    		}
    		String s = JSON.toJSONString(list);
    		logger.info(s);
    		JSONObject obj = new JSONObject();
    		// 前台通过key值获得对应的value值
    		obj.put("code", 0);
    		obj.put("msg", "");
    		obj.put("count", count);
    		obj.put("data", list);
    		return obj.toJSONString();
    	}

注意：导出功能需要导入LAY-EXCEL，相关文档地址：[http://excel.wj2015.com/\_book/][http_excel.wj2015.com_book]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191223161021941.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019122316083285.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70
[http_excel.wj2015.com_book]: http://excel.wj2015.com/_book/