layui数据表格重载与导出

数据表格

<%@ 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);//导出excelexcel.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>

页面效果

重载

后端接口

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

//动态查询@RequestMapping("getComputerQuery")@ResponseBodypublic 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/

layui数据表格重载与导出相关推荐

Layui数据表格重载不了问题
工具:VScode 解决办法: 重载数据表格的前提: 数据表格第一次加载方式必须使用url异步数据接口也就是说如果你的数据表格加载方式为data静态数据,是无法重载的,必须重新使用render重新渲 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格中导出所有数据的简易解决办法
layui数据表格中导出所有数据的简易解决办法官方文档的困惑解决办法官方文档的困惑首先要说明的是:layui在 table 的工具栏内置了数据导出按钮,如果你是用它内置的导出按钮来导出数据,是 ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格，操作当前行，数据重载（刷新表格数据）
最近项目中使用到layui前段框架,在修改完当前行的数据,并同步到数据库后,页面展示的还是旧数据虽然刷新页面可以解决问题,但这小问题还是让人不爽,人类总是懒惰的,绝不自己点刷新(狗头) 清空学生信息 ...
layui数据表格实现重载数据表格功能(搜索功能）
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格 ...
layui数据表格分页导出全部页面的数据到Excel表格中
在使用layui数据表格进行分页显示时,可能需要导出数据到Excel表,可是直接使用table.exportFile却会导出的是已经渲染到表中的数据,这时就会发现问题,导出的数据只是分页表格数据中的一 ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
layui-layer.open打开新页面进行数据处理，处理完成后数据表格重载问题
大概流程 1. 点击按钮打开子页面(layer.open)2. 子页面负责数据输入,通过函数封装好数据供父页面使用<script>var callbackdata = function ( ...

layui数据表格重载与导出

layui数据表格重载与导出相关推荐

最新文章

热门文章