当前位置: 首页 > news >正文

二环建设部网站定制网站和模板建站

二环建设部网站,定制网站和模板建站,无锡市做网站,局网站建设申请下图是我一个系统的操作日志,在分页插件右下角嵌入了一个导出所有数据的按钮 ,代码没有任何问题,点击导出按钮却失效 排查之后,发现表格标签table定义了ID又定义了lay-filter,因我使用的layui从2.7.6升级到2.8.11&…

下图是我一个系统的操作日志,在分页插件右下角嵌入了一个导出所有数据的按钮 ,代码没有任何问题,点击导出按钮却失效 

 排查之后,发现表格标签table定义了ID又定义了lay-filter,因我使用的layui从2.7.6升级到2.8.11,升级2.8+之后新增了ID,与原本的lay-filter功能基本一致,也就是定义了ID就不要定义lay-filter,否则例如我下面的id与lay-filter都定义不一致,导致定义的方法如果绑定的是表格的ID那么就会造成事件失效,解决办法要么删除id要么删除lay-filter

<table class="layui-hide" id="currentTableId" lay-filter="logTable" lay-size="sm"></table>

完整html代码:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>操作日志</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="layui/css/layui.css" rel="stylesheet"><style>/*表格标题样式*/.layui-table-tool-temp {text-align: center;font-size: 20px;font-weight: 600;color: #5d9d87;}.layui-table-cell {font-size: 8px;height: 30px;line-height: 24px;padding: 2px 2px;}.layui-form-item {margin-bottom: 0px; }</style>
</head>
<body>
<div class="layui-form-item layui-form" style="margin-top:5px" lay-filter="logFormFilter"> <!--必须在表单中添加layui-form的class,否则提交的时候无法获取到任何值,无法识别为form表单--><div class="layui-form-item" style="margin:0"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;" >操作时间</label><div class="layui-input-inline"  style="width: 180px;margin-right:0px;"><input id="createDate" name="createDate" class="layui-input" autocomplete="off"/></div></div><div class="layui-inline"><label class="layui-form-label">操作类型</label><div class="layui-input-inline"><select id="type" name="type" lay-search="" ><option value="">搜索或选择操作类型</option><option th:each="type:${types}" th:value="${type}" th:text="${type}"></option></select></div></div><div class="layui-inline"><div class="layui-input-group"><div class="layui-input-prefix">   操作用户  </div><input name="username" placeholder="输入用户工号或名字" class="layui-input"><div class="layui-input-split layui-input-suffix" style="cursor: pointer;background: aquamarine;" id="searchSubmit" lay-submit lay-filter="searchSubmit"><i class="layui-icon layui-icon-search"></i></div></div></div></div>
</div>
<script type="text/html" id="logToolbar">操作日志   <!--工具栏中添加搜索框,非laydate都没问题,否则会出现时间框无效-->
</script>
<table id="logList" lay-size="sm"></table>
<script type="text/html" id="pagebar"><!--分页插件--><div class="layui-btn-container"><button class="layui-btn layui-btn-hei layui-btn-sm " lay-event="export" ><i class="layui-icon layui-icon-export">导出全部</i></button></div>
</script>
<script src="/layui/layui.js"></script>
<script th:inline="javascript">layui.use(['form','laydate','table'], function(){var laydate = layui.laydate, table = layui.table, form = layui.form;//操作日期初始化laydate.render({elem: '#createDate',range: '~',value: [[${createDate}]] //初始化日期,max:0 //最大日期只能选择当天,rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增});table.render({elem: '#logList',url:'/getSysLog',method: 'post', //默认:get请求cellMinWidth: 80,page: true,limit: 20,limits: [20, 50, 100],title: '操作日志',where: {createDate : [[${createDate}]] },toolbar: '#logToolbar',pagebar: '#pagebar', // 分页栏模板even: true, //开启隔行背景cols: [[{type:'numbers'},{field:'model', title:'模块', width:160},{field:'type', title:'类型', sort:true, width:70},{field:'description', title:'描述', width:146},{field:'url', title: 'Url', width:128},{field:'method', title:'方法', width:220},{field:'params', title:'参数'},{field:'result', title:'结果' },{field:'username', title:'操作用户', width:100},{field:'ip', title:'IP', width:100},{field: 'createDate', width:120, title: '操作时间', sort: true, templet: "<div>{{layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}]],done: function(res, curr, count){pageCurr=curr;}});//监听搜索框form.on('submit(searchSubmit)', function(data){//重新加载tabletable.reload('logList',{    //重新加载tablewhere: data.field, page: {curr: 1 //重新从第 1 页开始,如果当前是第10页,再次根据其他条件查询可能无法查询到第10页的数据,翻页时并不会触发跳到第1页}});return false;});// 底部分页栏事件table.on('pagebar(logList)', function(obj){debugger;var eventValue = obj.event; // 获得按钮 lay-event 值if(eventValue == 'export'){$.post('/getSysLog', form.val('logFormFilter'), function(res) {if(res.code==0){table.exportFile('logList', res.data, 'xls'); //表名 数据  格式}else{layer.msg(res.msg, {icon: 5});}})}});});</script>
</body>
</html>

http://www.dinnco.com/news/63896.html

相关文章:

  • 用网站空间可以做有后台的网站吗东莞网站建设优化诊断
  • 网站开发所以浏览器兼容模式佛山关键词排名工具
  • 用php做网站用什么框架免费的网络推广渠道
  • 电商设计详情页seo培训教程视频
  • 免费视频素材网站免费直链平台
  • 海外建站流程电商平台推广方案
  • 南京建站服务百度app官网下载安装
  • 的网站建设公司那个好外贸快车
  • 做网站怎么回本深圳网站设计
  • 有免费的微网站是什么9 1短视频安装
  • 织梦后台怎么建设网站什么是搜索引擎营销
  • axure做的网站可以用吗广州seo排名优化服务
  • 新疆免费网站建设如何开一个自己的网站
  • 三一重工的网站是哪家做的aso优化方法
  • 做兼职的网站打字员厦门网站流量优化价格
  • 网站开发所涉及的技术网页代码大全
  • 无锡网站建设推荐智勇产品软文模板
  • 一个空间怎么做多个网站中央广播电视总台
  • 做外贸的有哪些网站有哪些东莞网络营销信息推荐
  • 做网站客户端游戏推广话术技巧
  • 网站不稳定天津做网站的
  • 上海网站建设公司推百度网络营销中心客服电话
  • 做网站设计百度不能搜的十大禁词
  • 什么是网站可信认证模板网站哪个好
  • 做简单的动态网站教程刷关键词指数
  • 学做网站论坛vip号码短视频seo营销
  • 小说网站防盗做的好处旺道seo推广效果怎么样
  • 网站开发费计入什么会计科目云南seo公司
  • 建设手机银行网站138ip查询网域名解析
  • 杭州大型网站建设四川疫情最新消息