layui数据表格重载与导出

最新推荐文章于 2023-06-25 16:40:08 发布
最新推荐文章于 2023-06-25 16:40:08 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： layui 文章标签： layui数据表格重载与导出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwenxue/article/details/103667464
版权

数据表格

<%@ 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>

 <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

页面效果

 重载

 后端接口

/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/

 

云淡风轻58
关注
专栏目录
最新layui版本的导出 进行重写导出内容
qq_20448967的博客
02-19 7523
前几天在用layui的最新table居然有导出功能 ,后来就用了 但是后来发现文档没有说明可以修改导出内容的api,后来自己就修改源码进行导出的重写 进入正题    首先找到对应模块 路径layui/lay/modules/table.js  然后找到导出功能的方法 核心源码这里 我最后修改如下  首先我在table.js定义全局的变量 myConfig=""; 重写后的代码  ...
layUI 笔记 layui Table--使用内置导出数据方法导出全部数据 Excel、CSV
qq_15785207的博客
07-10 1457
$("#ddlActionType option:contains('---請選擇---')").attr("selected", true);
layui重写table的导出功能
doupengzp的博客
06-08 3216
目录 1.下载layui的源码 2.重写table.exportFile方法 2.1 下载excel插件 2.2layui.js中引入excel插件 2.3修改layui\src\lay\modules下的table.js文件 3.重新打包编译 3.1安装依赖 3.2全局安装gulp 以前的项目中前端用的layui，那会选layui就是那会觉得样式还挺好看的，而且基本上需要的组件都有，尤其是自带table的导出和打印功能，不过table的导出功能还有点不足之处，导出后的文件直接查看没什么.
layui table导出选中数据或导出所有数据，打印选中数据
chuanren1991的博客
11-12 4516
导出选中数据，导出当前查询条件下的所有数据 打印选中数据 var tableDataCount;//记录查询到数据的总条数 var exportUrl = 'xxx';//记录查询url var currTable = table.render({ elem: "#LAY-list-manage", url: exportUrl, where: whereStr, toolbar: '#toolbarDemo', defaultToolbar: ['filte
关于layui的exports
allenmu1982的博客
12-01 916
最近公司的后台管理系统，我选用了layui来开发： 一，自定义模块部分 首先我们自定义一个bodyTab模块bodyTab.js：它依赖Jquery和element模块： layui.define(['element','jquery'],function(exports){ var el = layui.element; var $ = layui.$; ...
layui数据表格渲染，操作按钮模板，模板监听，表格重载，导出任意数据
lifangfang0607的博客
04-12 2054
layui数据表格渲染有三种方式： 方法渲染 自动渲染 转换静态表格 参考layui官网：https://www.layui.com/doc/modules/table.html#methodRender 官方推荐使用方法渲染，此种方法无需写过多的HTML，我自己用的也是此种方法。具体代码如下： // html部分 <table id="demo" lay-filter="demo"&g...
layui数据表格导出所有数据（使用自带的接口实现并包括查询后的数据和自定义导出文件名）
Platingsd的博客
09-19 3374
本文主要解决了layui的数据表格的数据导出， 将原本只能导出本页数据的导出功能扩展为可以定义文件名且导出全部数据。 （没有使用第三方组件且和数据表格共用了一个后台接口） 第一步：获取所有的数据条数 var limitCount = ""; var tableIns = table.render({ elem: '#test' ,url: '/****' //数据接口 ,t...
layui 从表格导出全部数据（不需外部加载任何类）
YuiJar的博客
07-08 957
layui当前内置的导出表格数据只能是导出当前页面的数据，不能导出全部的数据，本来查阅了很多，大部分都是自己重新写导出，但是直接从url导出，我不知道怎么写也不知道怎么重新改变参数请求，所以想了一个模拟事件来实现导出全部数据。 前提介绍：页面上有搜索和layui数据表格展示，用户刚进入时默认查询数据展示出来，也可以根据不同条件搜索内容展示。类似如下 原理是：当单击“导出报表”按钮时，先给搜...
layui数据表格实现动态合并单元格呈现一对多数据展示以及点击选中效果
qq_41708308的博客
08-09 3621
  前言：   关于一对多数据展示，有的解决方式时通过定义两个表格的形式来呈现他们的关系，一个表格显示主表数据，另一个表格显示主表中某条数据关联的明细表数据，这样虽然也可以实现一对多数据的展示，但我觉得这样并不是最好的。就我所知道的缺点有一下三个： 两个表格数据，需要请求两次服务器获取数据信息 两个表格需要占用的UI面积过多 如果两个表格都涉及到较多操作，操作起来略显麻烦   通过上面所说的我们了解到，应该尽量使用一个表格来实现这种包含一对多数据的数据展示。那么接下来看看我是怎么实现这种数据展示的。使用
layui 滚动数据_LayUI之旅-数据表格
weixin_39569894的博客
12-18 774
layui的数据表格是使用频率非常高的组件，在入门篇，我们已经大致了了解了数据表格的方法级渲染，接下来我们深入研究和学习layui-table组件的使用方法。1、渲染方式数据表格的渲染方式有三种，这是官方对三种渲染方式的场景介绍：方式机制适用场景方法渲染用JS方法的配置完成渲染(推荐)无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。自动渲染HTML配置，自动渲染无需写过多 J...
对layui中的onevent 和event的使用详解
12-11
这是官方文档的说明 layui.onevent(modName, events, callback) 自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块 layui.event(modName, events, params) 执行自定义模块事件，搭配onevent使用 参数1我暂时理解为组，定义子级方法和使用event调用都需要注意这个参数必须一致 参数二是定义父级方法名，如果有需要定义该方法的子方法时候同样使用onevent,但参数二的方法名需要与父级相同并已加上括号 如下面的代码中data方法，定义子方法就是data(1), 如果
layui关闭层级、简单监听的实例
01-19
弹出一个小页面input 代码如下 /*监听工具条*/ table.on('tool(test)', function(obj){ var data = obj.data; /*获得当前行数据*/ var layEvent = obj.event; /*获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）*/ var tr = obj.tr; /*获得当前行 tr 的DOM对象*/ if(layEvent === 'crypto'){//跳转生成秘钥页面 layer.prompt({title: '输入登陆密码，并确认', formType
layui table 重写导出Excel 复杂表头
清叶 的专栏
11-25 1301
效果如上，代码如下 layui.extend({ excel:basePath+'/js/layui_exts/excel' }); layui.use(['excel'],function(){ var excel = layui.excel; }); var data = [ {id: 'ID', username: 'wang0', age: '', sex: '', score: '100', classi...
layui table 导出xls重写之导出全部数据
阿门阿窗一颗葡萄树
07-29 752
首先，找到layui包里的table.js，然后格式化代码 在大概115行的地方，改成 然后在大概这个位置，加一个方法 如图所示，可以一键导出99999999条数据，绝对够使????
layui 列表数据绑定分页、全选、导出、打印
tqyqiutian的专栏
09-17 596
<script src="/app/layui/layui.js"></script> <script src="/app/layui/xm-select.js"></script> <link rel="stylesheet" href="/app/layui/css/layui.css" media="all"> <script> var gclt = $("#gclt").val()...
IE8中，回车键自动触发layui中button的lay-event事件
weixin_44249754的博客
08-07 4133
原因：IE中回车键会自动绑定button的submit事件 解决：将button加上type="button"属性一般可解决问题。 若上述方法不行，将可在这些按钮前加上一个type=“submit”的隐藏button，亲测设置display:none不好用，可尝试将button背景色设置和背景颜色相同或设置宽度为0等方法隐藏。 ...
layui 事件和监听
代码笔记
06-25 3266
layui 事件和监听
layui 显示饼图_echarts实现饼图绘制
weixin_29723669的博客
12-31 2283
项目中需要绘制饼图，因此简单学习了下echarts的基本使用。head中引入js文件：body中：......js// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('pie_echarts'));// 指定图表的配置项和数据option = {title: {text: 'bug分布',x: 'l...
layui集成echarts动态获取数据生成饼状图
xfy18317776108的博客
12-21 5561
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>履职统计</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compati...
layui数据表格重载
最新发布
07-27
重载layui数据表格可以使用reload方法。具体步骤如下： 1. 首先，获取到数据表格的实例对象。可以通过layui.table的render方法或者on方法中的参数获取到实例对象。 2. 然后，使用实例对象的reload方法进行重载。reload方法接受一个参数，用于重新加载表格数据。可以传入一个新的url，或者传入一个新的where对象来更新表格数据。 下面是一个示例代码： ```javascript // 获取数据表格实例对象 var table = layui.table; // 重载数据表格 table.reload('tableId', { url: 'newDataUrl', // 新的数据接口 where: { // 新的请求参数 key1: value1, key2: value2 } }); ``` 其中，'tableId'是数据表格的id，'newDataUrl'是新的数据接口，where对象是新的请求参数。 这样就可以通过reload方法重新加载数据表格了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云淡风轻58

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值