-
2020-11-04 17:51:31
.layui-table-cell, .layui-table-tool-panel li{ overflow:visible !important; }
加以上样式
更多相关内容 -
用于layui table 自定义列
2021-07-06 10:15:51用于layui table 自定义列,保存table模板 -
layui table设置某一行的字体颜色方法
2020-10-16 11:14:24今天小编就为大家分享一篇layui table设置某一行的字体颜色方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui table 表格模板按钮的实例代码
2020-10-16 08:39:35今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
自定义layui table列
2021-07-06 10:12:15最近遇到一个需求,要求可以用户自己配置layui Table的列名并可以存成模板,下次进来默认渲染成用户自定义的表格 先看Demo 实现这个需求用到了layui的两个组件 transfer table 具体思路为: 弹窗显示穿梭框,...最近遇到一个需求,要求可以用户自己配置layui Table的列名并可以存成模板,下次进来默认渲染成用户自定义的表格
先看Demo- 实现这个需求用到了layui的两个组件 transfer table
具体思路为:
- 弹窗显示穿梭框,穿梭框是这个表格的所有列名
- 选中之后,关闭弹窗回调选中的列名
- 在表格配置中重新render
- 实现
2.代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css"> <script src="js/jquery-3.4.1.min.js"></script> <script src="layui-v2.5.7/layui/layui.js"></script> </head> <body> <div id="transferBox" class="demo-transfer"></div> <br /><br /> <button id="getData" class="layui-btn layui-btn-normal">生成</button> <br /><br /> <table id="diyTable" lay-filter="test"></table> </body> </html> <script> var colJson = [{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }, { field: 'username', title: '用户名', width: 80 }, { field: 'sex', title: '性别', width: 80, sort: true }, { field: 'city', title: '城市', width: 80 }, { field: 'sign', title: '签名', width: 177 }, { field: 'experience', title: '积分', width: 80, sort: true }, { field: 'score', title: '评分', width: 80, sort: true }, { field: 'classify', title: '职业', width: 80 }, { field: 'wealth', title: '财富', width: 135, sort: true } ]; layui.use(['table', 'transfer', 'util', 'layer'], function() { var table = layui.table; var transfer = layui.transfer; var layer = layui.layer; var util = layui.util; var tableIns = table.render({ elem: '#diyTable', height: 312, url: '/demo/table/user/', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print'], page: true, cols: [colJson] }); transfer.render({ elem: '#transferBox', data: colJson, parseData: function(res) { return { "value": res.field, "title": res.title } }, id: 'transferBox' }) $("#getData").click(function() { var getData = transfer.getData('transferBox'); colJson = []; $(getData).each(function(i, item) { console.log(item); var fieldItem = { field: item.value, title: item.title }; colJson.push(fieldItem); }) var tableIns = table.render({ elem: '#diyTable', height: 312, url: '/demo/table/user/', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print'], page: true, cols: [colJson] }); }) }); </script>
- 实现这个需求用到了layui的两个组件 transfer table
-
layui table 更新行触发templet重新渲染
2022-04-28 13:47:40更新方法 ... // 这里的字段必须要在 table.render.cols.filed 有定义,否则无法触发表格渲染 // key 决定是否重新渲染某一列,value 由 templet 里的语句进行逻辑处理 canView: !data.canView }..更新方法
obj.update({ // 这里的字段必须要在 table.render.cols.filed 有定义,否则无法触发表格渲染 // key 决定是否重新渲染某一列,value 由 templet 里的语句进行逻辑处理 canView: !data.canView });
, {field: 'canView', title: '操作', toolbar: '#test-table-operate-barDemo'}
根据 layui / layuiadmin / layui / lay / modules / table.js 里的定义
that.eachCols(function(i, item2){ // 这里需要加上 toolbar if(item2.field == key && (item2.templet || item2.toolbar)){ // 支持字段更新后的兼容 toolbar 的状态刷新 templet = item2.templet || item2.toolbar; } }
如果不修改 table.js ,那就要把 toolbar 改为 templet
, {field: 'canView', title: '操作', templet: '#test-table-operate-barDemo'}
这里也说的很详细
-
一款漂亮有质感的Layui后台模板SummerAdmin.zip
2022-03-14 16:08:25一款漂亮有质感的layui后台模板SummerAdmin 漂亮有质感 完整的页面 有良好的设计语言 适合后台二次开发用 多色彩多主题切换 多标签,标签自带完整的关闭功能 表单构建功能,适合快速开发 -
layUI中table的实现模板
2019-07-22 11:11:05table数据实现模板一、目的二、代码以及效果1. layUI实现表单的页面编辑1.实现目标2.实现效果3.代码2.table的操作1.界面效果2.注意事项以及总结3.整个网页的代码1.meeting-control-classroom.jsp代码2.meeting-...table数据实现模板
一、目的
写这篇文章的目的是为了保存这个模板,这个模板主要介绍了如何利用layUI框架中的table实现数据的操作。
二、代码以及效果
1. layUI实现表单的页面编辑
1.实现目标
通过点击某个按钮或者其他,触发一个点击事件,从而通过js渲染一个表单,通过layUI中的layer生成对应的按钮。
2.实现效果
3.代码
//多窗口模式,层叠置顶 layer.open({ type: 1 ,title: '添加会议室信息' ,area: ['600px', '600px'] ,shade: 0 ,maxmin: true ,offset: [ //为了演示,随机坐标 ($(window).height()/4) ,($(window).width()/3) ] ,content: '<div >'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼栋名称</span></div>'+ '<div style="display: inline-block;"><select class="form-control" id="pandectXmlFile0" onchange="updateTung()">'+ select+ '</select></div></div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼层名称</span></div>'+ '<div style="display: inline-block;"><select class="form-control" id="pandectXml0" onchange="updateFloor()">'+ '<option></option>'+ '</select><input type="hidden" id="buildid"></div></div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室名称</span></div>'+ '<div style="display: inline-block;"><input type="text" id="meetingnameadd"></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室类型</span></div>'+ '<div style="display: inline-block;"><select id="meetingtypeadd">'+ '<option value=""></option>'+ '<option value="1">小型讨论室</option>'+ '<option value="2">演讲会议室</option>'+ '<option value="3">视频会议室</option>'+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室规格</span></div>'+ '<div style="display: inline-block;"><select id="meetingspecsadd">'+ '<option value=""></option>'+ '<option value="1">9人</option>'+ '<option value="2">20人</option>'+ '<option value="3">50人</option>'+ '<option value="4">100人</option>'+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室状态</span></div>'+ '<div style="display: inline-block;"><select id="meetingstatusadd">'+ '<option value=""></option>'+ '<option value="1">空闲</option>'+ '<option value="2">使用中</option>'+ '<option value="3">故障</option>'+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">中控IP</span></div>'+ '<div style="display: inline-block;"><input type="text" id="IPadd" onblur="addIP()"></div>'+ '</div>'+ '</div>' ,btn: ['添加', '取消'] //只是为了演示 ,yes: function(){ addmeetingclassroom(); } ,btn2: function(){ layer.closeAll(); } ,zIndex: layer.zIndex //重点1 ,success: function(layero){ layer.setTop(layero); //重点2 } });
2.table的操作
1.界面效果
2.注意事项以及总结
注意:需要注意上图中各个操作在页面中的位置以及在table中的位置
1.如上图所示,添加、查询、删除方法均在table的外面,而修改在table的里面
总结:如果操作在table里面,那么需要用到layUI的table的的监听功能,否则不需要。代码
//监听工具条 table.on('repairTools(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var tr = obj.tr; //获得当前行 tr 的DOM对象 toreturn(data); }); $("#searchbtn").click(search); $("#addbtn").click(add); $("#delbtn").click(del);
3.整个网页的代码
1.meeting-control-classroom.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta name="renderer" content="webkit" /> <meta name="force-rendering" content="webkit" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro.css" media="all"> <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-icons.css" media="all"> <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-responsive.css" media="all"> <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-ui-light.css" media="all"> <link rel="stylesheet" href="content/layui-v2.4.5/layui/css/layui.css" media="all"> <link rel="stylesheet" href="content/css/switch.css" media="all"> <script type="text/javascript" src="content/jquery/jquery.min.js"></script> <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootstrap.min.js"></script> <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-icons-ie7.min.js"></script> <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-charms.min.js"></script> <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-panorama.min.js"></script> <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-pivot.min.js"></script> <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro.min.js"></script> <script type="text/javascript" src="content/layui-v2.4.5/layui/layui.js"></script> <script type="text/javascript" src="content/js/meeting-control-classroom.js"></script> </head> <style> html { height: 100%; width: 100%; min-width: 1680px; } body { height: 100%; width: 100%; } .ipcall-container { width: 17%; display: inline-block; text-align: center; padding-left: 15px; padding-top: 15px; } .meeting-title { font-size: 20.5px; width: 100%; display: block; /* color: black !important; */ text-rendering: optimizelegibility; text-decoration: none; padding: 2.33px; } .meeting-title:visited, .meeting-title:active, .meeting-title:hover { background-color: #dddddf; text-decoration: none; } .meeting-li { /* color: black !important; */ } </style> <style> .newdiv1 { background-color: #ffffff; height: 340px; width: 95%; display: inline-block; margin-top: 1%; margin-left: 2%; } .newdiv2 { height: 300px; width: 30%; display: inline-block; border: 1px solid #1CAFB5; border-radius: 14px; border-top: 8px solid #0172C7; margin-right: 3%; margin-top: 1%; } .newsdiv1 { background-color: #ffffff; height: 45%; width: 100%; display: inline-block; margin-top: 3%; margin-left: 2%; border: 1px solid #1CAFB5; } .newsdiv2 { height: 90%; width: 97%; display: inline-block; border: 1px solid #1CAFB5; border-radius: 14px; border-top: 8px solid #0172C7; margin-right: 3%; margin-top: 1%; } </style> <body> <div style="padding-left: 15px;background-color:#448aca;color:white;min-height:98px;height:9.69%;"> <div id="nav-bar"> <div class="row"> <div class="span9"> <div style="display: inline-block;"> <img src="content/images/METRO17.png" width="54" height="54" alt=""> </div> <div id="header-container"> <div class="dropdown"> <a class="header-dropdown" style="color:white;" href="#"> 会议运维 </a> </div> <h5>Avtronsys会议中心管理平台</h5> </div> </div> <div style="display: inline-block;float:right;padding-right:3%;"> <a href="index2.jsp"><img alt="" src="content/images/会议中心管理平台-设备记录-新_06.png"></a> </div> </div> </div> </div> <div id="buildnav" style="float:left;background-color:#eee;width:14.4%;height:86%;padding:1%;"> <p style="width:100%;"> <input style="width:100%;" type="text" class="search-query" placeholder="搜索"> </p> <h2>会议室列表</h2> <p style="height:15px;"></p> <ul class="nav metro-nav-list"> <a class="meeting-title">0号会议厅</a> <li> <a href="#">1楼</a> <ul class="nav"> <li><a href="#">101室</a></li> <li><a href="#">102室</a></li> <li><a href="#">103室</a></li> <li><a href="#">104室</a></li> <li><a href="#">105室</a></li> <li><a href="#">106室</a></li> <li><a href="#">107室</a></li> </ul> </li> </ul> <ul class="nav metro-nav-list"> <a class="meeting-title">1号会议厅</a> <li> <a href="#">1楼</a> <ul class="nav"> <li><a href="#">201室</a></li> </ul> <a href="#">二楼</a> <ul class="nav"> <li><a href="#">101室</a></li> <li><a href="#">102室</a></li> <li><a href="#">103室</a></li> <li><a href="#">104室</a></li> <li><a href="#">105室</a></li> <li><a href="#">106室</a></li> <li><a href="#">107室</a></li> </ul> </li> </ul> </div> <div style="float:left;width:83%;height:86%;"> <div style="height:40px;margin-top:3%;" class="layui-form-item device-search-bar"> <div style="display: inline-block;width:14%;font-size:20px;margin-left:1%;"> 会议地点 <input id="meetingname" style="width:55%;height:100%;font-size:18px;" type="text"> </div> <div style="display: inline-block;width:18%;font-size:20px;"> <div style="display:inline-block;">会议室类型 </div> <div style="display:inline-block;width:50%;height:100%;"> <select id="meetingtype" name="city" style="width:100%;height:100%;display:inline-block;font-size:20px;" > <option value=""></option> <option value="1">小型讨论室</option> <option value="2">演讲会议室</option> <option value="3">视频会议室</option> </select> </div> </div> <div style="display: inline-block;width:18%;font-size:20px;"> <div style="display:inline-block;">会议室规格 <input type="hidden" value="<%=session.getAttribute("userid")%>" id="loginUser"/> <input type="hidden" value="<%=session.getAttribute("username")%>" id="username"/> </div> <div style="display:inline-block;width:50%;height:100%;"> <select id="meetingspecs" name="city" style="width:100%;height:100%;display:inline-block;font-size:20px;" > <option value=""></option> <option value="1">9人</option> <option value="2">20人</option> <option value="3">50人</option> <option value="4">100人</option> </select> </div> </div> <div style="display: inline-block;width:18%;font-size:20px;"> <div style="display:inline-block;">会议室状态 </div> <div style="display:inline-block;width:50%;height:100%;"> <select id="meetingstatus" name="city" style="width:100%;height:100%;display:inline-block;font-size:20px;" > <option value=""></option> <option value="1">空闲</option> <option value="2">使用中</option> <option value="3">故障</option> </select> </div> </div> <div style="display: inline-block;width:20%;float:right;"> <button id="searchbtn" class="layui-btn layui-btn-normal" style="background-color: #40C7DA;">搜索</button> <button id="addbtn" class="layui-btn layui-btn-normal" style="background-color: #40C7DA;">添加</button> <button id="delbtn" class="layui-btn layui-btn-normal" style="background-color: #40C7DA" data-type="getCheckData">删除</button> </div> </div> <div class="layui-inline" style="margin:2px;width:100%;height:800px;"> <table class="layui-hide" id="test"></table> </div> </div> </body> </html>
2.meeting-control-classroom.js代码
var builddata ; var contents = {}; $(selectAllBuild); layui.use(['table','layer','laydate'],function(){ var table = layui.table; var layer = layui.layer; var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#meetingstart' //指定元素 ,type: 'datetime' }); laydate.render({ elem: '#meetingend' //指定元素 ,type: 'datetime' }); //条件查询方法开始 var search = function(){ var one = {}; var meetingname = $("#meetingname").val().trim() var val = $("#meetingtype option:selected").val().trim(); if(val!=""){ one.meetingtype=val; } var meetingspecs = $("#meetingspecs option:selected").val().trim(); if(meetingspecs!=""){ one.meetingspecs=meetingspecs; } var meetingstatus = $("#meetingstatus option:selected").val().trim(); if(meetingstatus!=""){ one.meetingstatus=meetingstatus; } layui.table.render({ elem: '#test' ,height: '500px' ,method:'POST' ,url: 'selectMeetingClassroomBuildPage' //数据接口 ,skin: 'nob' //行边框风格 ,even: true //开启隔行背景 ,request: { pageName: 'page', limitName: 'count' } ,where: { meetingname:meetingname, meetingtype:one.meetingtype, meetingspecs:one.meetingspecs, meetingstatus:one.meetingstatus } ,parseData: function(res){ //res 即为原始返回的数据 for(i in res.data){ res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname; if(res.data[i].meetingtype==1){ res.data[i].meetingtypes="小型讨论室"; }else if(res.data[i].meetingtype==2){ res.data[i].meetingtypes="演讲会议室"; }else{ res.data[i].meetingtypes="视频会议室"; } if(res.data[i].meetingspecs==1){ res.data[i].meetingspecss="9人"; }else if(res.data[i].meetingspecs==2){ res.data[i].meetingspecss="20人"; }else if(res.data[i].meetingspecs==3){ res.data[i].meetingspecss="50人"; }else{ res.data[i].meetingspecss="100人"; } if(res.data[i].meetingstatus==1){ res.data[i].meetingstatuss="空闲"; }else if(res.data[i].meetingstatus==2){ res.data[i].meetingstatuss="使用中"; }else{ res.data[i].meetingstatuss="故障"; } } return { "code": res.state, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; }, page: true //开启分页 , cols: [[ {type: 'checkbox', fixed: 'left'}, { field: 'location', title: '会议室地点', style:'text-align:center' }, { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' }, { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'}, { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'}, { field: 'ip', title: '中控IP' , style:'text-align:center'}, { title: '操作', templet:function(d){ return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+' onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>' }, style:'text-align:center'} ]] }); $("th,.layui-table-header").css({ "background-color": "#000000", "color": "white", "text-align": "center" }); } //条件查询方法结束 //添加方法开始 var add = function(){ $.ajax({ url:"selectMeetingBuildPage", data:{"page":0,"count":99999}, type:"post", dataType:"json", async:false, error:function(){ console.log("查询错误"); }, success:function(res){ builddata = null;//重置builddata的值,避免多次点击添加按钮,导致builddata的值被重复叠加 builddata = res.data; if(res.data.length <= 0){//如果楼栋表中暂时没有添加数据 alert("暂无数据"); return null; } var tunglist =[];//创建一个list用来接收楼栋下拉框中的值 for(i in res.data){ if(tunglist.length > 0){ var labal = false;//用来判断tunglist中是否存在该对象的状态 for(j in tunglist){ if(res.data[i].tung ==tunglist[j]){//如果tunglist中已经有了当前楼栋的值 labal = true; break;//break表示跳出当前for循环 } } if(labal == false){ tunglist.push(res.data[i].tung);//如果for循环完毕 } }else{ tunglist.push(res.data[i].tung); } } var select = '<option></option>'; for(var i =0;i<tunglist.length;i++){ select += '<option value="'+tunglist[i]+'">'+tunglist[i]+'</option>'; } $("#pandectXmlFile"+0).html(select); var that = this; //多窗口模式,层叠置顶 layer.open({ type: 1 ,title: '添加会议室信息' ,area: ['600px', '600px'] ,shade: 0 ,maxmin: true ,offset: [ //为了演示,随机坐标 ($(window).height()/4) ,($(window).width()/3) ] ,content: '<div >'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼栋名称</span></div>'+ '<div style="display: inline-block;"><select class="form-control" id="pandectXmlFile0" onchange="updateTung()">'+ select+ '</select></div></div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼层名称</span></div>'+ '<div style="display: inline-block;"><select class="form-control" id="pandectXml0" onchange="updateFloor()">'+ '<option></option>'+ '</select><input type="hidden" id="buildid"></div></div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室名称</span></div>'+ '<div style="display: inline-block;"><input type="text" id="meetingnameadd"></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室类型</span></div>'+ '<div style="display: inline-block;"><select id="meetingtypeadd">'+ '<option value=""></option>'+ '<option value="1">小型讨论室</option>'+ '<option value="2">演讲会议室</option>'+ '<option value="3">视频会议室</option>'+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室规格</span></div>'+ '<div style="display: inline-block;"><select id="meetingspecsadd">'+ '<option value=""></option>'+ '<option value="1">9人</option>'+ '<option value="2">20人</option>'+ '<option value="3">50人</option>'+ '<option value="4">100人</option>'+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室状态</span></div>'+ '<div style="display: inline-block;"><select id="meetingstatusadd">'+ '<option value=""></option>'+ '<option value="1">空闲</option>'+ '<option value="2">使用中</option>'+ '<option value="3">故障</option>'+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">中控IP</span></div>'+ '<div style="display: inline-block;"><input type="text" id="IPadd" onblur="addIP()"></div>'+ '</div>'+ '</div>' ,btn: ['添加', '取消'] //只是为了演示 ,yes: function(){ addmeetingclassroom(); } ,btn2: function(){ layer.closeAll(); } ,zIndex: layer.zIndex //重点1 ,success: function(layero){ layer.setTop(layero); //重点2 } }); } }) } //添加方法结束 //删除方法开始 var del = function(){ var checkStatus = table.checkStatus('test'); //Test为table的id console.log(checkStatus.data) //获取选中行的数据 var teg; if(checkStatus.data.length >0){ for(i in checkStatus.data){ if(i==0){ teg = checkStatus.data[i].meetingid; }else{ teg+=","+checkStatus.data[i].meetingid; } } }else{ alert("至少选择一条数据"); return null; } layer.open({ title:'提示' ,content: '确定要删除这些会议室吗?,删除会议室的同时会删除会议室对应的设备' ,btn: ['确定', '取消'] ,yes: function(index, layero){ delmeetingclassroom(teg); } ,btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } }); } //删除方法结束 //默认查询 table.render({ elem: '#test', method: 'post', height: '500px', url: 'selectMeetingClassroomBuildPage', skin: 'nob' //行边框风格 , even: true //开启隔行背景 , request: { pageName: 'page', limitName: 'count' }, parseData: function (res) { //res 即为原始返回的数据 for(i in res.data){ res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname; if(res.data[i].meetingtype==1){ res.data[i].meetingtypes="小型讨论室"; }else if(res.data[i].meetingtype==2){ res.data[i].meetingtypes="演讲会议室"; }else{ res.data[i].meetingtypes="视频会议室"; } if(res.data[i].meetingspecs==1){ res.data[i].meetingspecss="9人"; }else if(res.data[i].meetingspecs==2){ res.data[i].meetingspecss="20人"; }else if(res.data[i].meetingspecs==3){ res.data[i].meetingspecss="50人"; }else{ res.data[i].meetingspecss="100人"; } if(res.data[i].meetingstatus==1){ res.data[i].meetingstatuss="空闲"; }else if(res.data[i].meetingstatus==2){ res.data[i].meetingstatuss="使用中"; }else{ res.data[i].meetingstatuss="故障"; } } return { "code": res.state, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; }, cols: [[ {type: 'checkbox', fixed: 'left'}, { field: 'location', title: '会议室地点', style:'text-align:center' }, { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' }, { field: 'meetingspecss', title: '会议室规格', style:'text-align:center' }, { field: 'meetingstatuss', title: '会议室状态', style:'text-align:center' }, { field: 'ip', title: '中控IP' , style:'text-align:center'}, { title: '操作', templet:function(d){ return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+' onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>' }, style:'text-align:center'} ]], page: true }) $("th,.layui-table-header").css({ "background-color": "#000000", "color": "white", "text-align": "center" }); //监听工具条 table.on('repairTools(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var tr = obj.tr; //获得当前行 tr 的DOM对象 toreturn(data); }); $("#searchbtn").click(search); $("#addbtn").click(add); $("#delbtn").click(del); }); //楼栋下拉触发事件,用来改变楼层下拉框中的值 var updateTung =function(){ var tung = $("#pandectXmlFile0 option:selected").val(); if(tung ==""){ }else{ var floorlist =[];//创建一个list集合用来接收楼层下拉框中的值 for(i in builddata){ if(builddata[i].tung==tung){// floorlist.push(builddata[i].floor); } } var floordata ='<option></option>'; for(j in floorlist){ floordata += '<option value="'+floorlist[j]+'">'+floorlist[j]+'</option>'; } $("#pandectXml0").html(floordata); } } //楼层下拉触发事件,用来给buildid赋值 var updateFloor =function(){ var floor = $("#pandectXml0 option:selected").val(); var tung = $("#pandectXmlFile0 option:selected").val(); var buildid = ""; if(floor ==""||tung==""){ }else{ var floorlist =[]; for(i in builddata){ if((builddata[i].tung==tung)&&(builddata[i].floor==floor)){ buildid = builddata[i].buildid; } } $("#buildid").val(buildid); console.log("buildid的值"+$("#buildid").val()); } } var addmeetingclassroom = function(){ var buildid = $("#buildid").val(); var meetingname = $("#meetingnameadd").val(); var pandectXmlFile0 = $("#pandectXmlFile0 option:selected").val(); var pandectXml0 = $("#pandectXml0 option:selected").val(); var meetingtype = $("#meetingtypeadd option:selected").val(); var meetingtype = $("#meetingtypeadd option:selected").val(); var meetingspecs = $("#meetingspecsadd option:selected").val(); var meetingstatus = $("#meetingstatusadd option:selected").val(); var ip = $("#IPadd").val(); if((pandectXmlFile0 == null) || (pandectXmlFile0 =="")){ alert("楼栋不能为空"); return null; } if((pandectXml0 == null) || (pandectXml0 =="")){ alert("楼层不能为空"); return null; } if((meetingname == null) || (meetingname =="")){ alert("会议室名称不能为空"); return null; }else{ meetingname = meetingname.trim();//去空格 } if((meetingtype == null) || (meetingtype =="")){ alert("会议室类型不能为空"); return null; } if((meetingspecs == null) || (meetingspecs =="")){ alert("会议室规格不能为空"); return null; } if((meetingstatus == null) || (meetingstatus =="")){ alert("会议室状态不能为空"); return null; } if((ip == null) || (ip =="")){ alert("中控IP不能为空"); return null; }else{ ip = ip.trim(); } $.ajax({ url:"insertMeetingClassrooom", type:"post", dataType:"json", data:{ "buildid":buildid, "meetingname":meetingname, "meetingtype":meetingtype, "meetingspecs":meetingspecs, "meetingstatus":meetingstatus, "ip":ip }, error: function(){ console.log("查询出错"); }, success:function(data){ if(data.state == 0){ layer.closeAll(); layui.table.render({ elem: '#test' ,height: '500px' ,method:'POST' ,url: 'selectMeetingClassroomBuildPage' //数据接口 ,skin: 'nob' //行边框风格 ,even: true //开启隔行背景 ,request: { pageName: 'page', limitName: 'count' } ,parseData: function(res){ //res 即为原始返回的数据 for(i in res.data){ res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname; if(res.data[i].meetingtype==1){ res.data[i].meetingtypes="小型讨论室"; }else if(res.data[i].meetingtype==2){ res.data[i].meetingtypes="演讲会议室"; }else{ res.data[i].meetingtypes="视频会议室"; } if(res.data[i].meetingspecs==1){ res.data[i].meetingspecss="9人"; }else if(res.data[i].meetingspecs==2){ res.data[i].meetingspecss="20人"; }else if(res.data[i].meetingspecs==3){ res.data[i].meetingspecss="50人"; }else{ res.data[i].meetingspecss="100人"; } if(res.data[i].meetingstatus==1){ res.data[i].meetingstatuss="空闲"; }else if(res.data[i].meetingstatus==2){ res.data[i].meetingstatuss="使用中"; }else{ res.data[i].meetingstatuss="故障"; } } return { "code": res.state, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; }, page: true //开启分页 , cols: [[ {type: 'checkbox', fixed: 'left'}, { field: 'location', title: '会议室地点', style:'text-align:center' }, { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' }, { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'}, { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'}, { field: 'ip', title: '中控IP' , style:'text-align:center'}, { title: '操作', templet:function(d){ return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+' onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>' }, style:'text-align:center'} ]] }); $("th,.layui-table-header").css({ "background-color": "#000000", "color": "white", "text-align": "center" }); selectAllBuild(); } alert(data.message); } }) } var toreturn = function(object){ var buildid = object.buildid; var meetingnameupdate = object.meetingname; var meetingtypeupdate = object.meetingtype; var meetingspecsupdate = object.meetingspecs; var meetingstatusupdate = object.meetingstatus; var meetingid = object.meetingid; var ipupdate = object.ip; var tung; var floor; $.ajax({ url:"selectMeetingBuildPage", data:{"page":0,"count":99999}, type:"post", dataType:"json", async:false, error:function(){ console.log("查询错误"); }, success:function(res){ builddata = null;//重置builddata的值,避免多次点击添加按钮,导致builddata的值被重复叠加 builddata = res.data; if(res.data.length <= 0){//如果楼栋表中暂时没有添加数据 alert("暂无数据"); return null; } var tunglist =[];//创建一个list用来接收楼栋下拉框中的值 for(i in res.data){ if(buildid == res.data[i].buildid){ tung = res.data[i].tung; floor = res.data[i].floor; } if(tunglist.length > 0){ var labal = false;//用来判断tunglist中是否存在该对象的状态 for(j in tunglist){ if(res.data[i].tung ==tunglist[j]){//如果tunglist中已经有了当前楼栋的值 labal = true; break;//break表示跳出当前for循环 } } if(labal == false){ tunglist.push(res.data[i].tung);//如果for循环完毕 } }else{ tunglist.push(res.data[i].tung); } } var select = '<option></option>'; for(var i =0;i<tunglist.length;i++){ if(tunglist[i] == tung){ select += '<option value="'+tunglist[i]+'" selected>'+tunglist[i]+'</option>'; }else{ select += '<option value="'+tunglist[i]+'">'+tunglist[i]+'</option>'; } } var floorlist =[];//创建一个list集合用来接收楼层下拉框中的值 for(i in builddata){ if(builddata[i].tung==tung){// floorlist.push(builddata[i].floor); } } var floordata ='<option></option>'; for(j in floorlist){ if(floor == floorlist[j]){ floordata += '<option value="'+floorlist[j]+'" selected>'+floorlist[j]+'</option>'; }else{ floordata += '<option value="'+floorlist[j]+'">'+floorlist[j]+'</option>'; } } //设置会议室类型的下拉框值 var types =[1,2,3]; var typesdata ='<option></option>'; for(i in types){ var typevalue; if(types[i] == 1){ typevalue ="小型讨论室"; }else if(types[i] == 2){ typevalue ="演讲会议室"; }else{ typevalue ="视频会议室"; } if(meetingtypeupdate ==types[i]){ typesdata += '<option value="'+types[i]+'" selected>'+typevalue+'</option>'; }else{ typesdata += '<option value="'+types[i]+'">'+typevalue+'</option>'; } } //设置会议室规格的下拉框值 var specses =[1,2,3,4]; var specsesdata ='<option></option>'; for(i in specses){ var typevalue; if(specses[i] == 1){ typevalue ="9人"; }else if(specses[i] == 2){ typevalue ="20人"; }else if(specses[i] == 3){ typevalue ="50人"; }else{ typevalue ="100人"; } if(meetingspecsupdate ==specses[i]){ specsesdata += '<option value="'+specses[i]+'" selected>'+typevalue+'</option>'; }else{ specsesdata += '<option value="'+specses[i]+'">'+typevalue+'</option>'; } } //设置会议室状态的下拉框值 var statuses =[1,2,3]; var statusdata ='<option></option>'; for(i in statuses){ var typevalue; if(statuses[i] == 1){ typevalue ="空闲"; }else if(statuses[i] == 2){ typevalue ="使用中"; }else{ typevalue ="故障"; } if(meetingstatusupdate ==statuses[i]){ statusdata += '<option value="'+statuses[i]+'" selected>'+typevalue+'</option>'; }else{ statusdata += '<option value="'+statuses[i]+'">'+typevalue+'</option>'; } } var that = this; //多窗口模式,层叠置顶 layer.open({ type: 1 ,title: '修改会议室信息' ,area: ['600px', '600px'] ,shade: 0 ,maxmin: true ,offset: [ //为了演示,随机坐标 ($(window).height()/4) ,($(window).width()/3) ] ,content: '<div >'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼栋名称</span></div>'+ '<div style="display: inline-block;"><select class="form-control" id="pandectXmlFile0" onchange="updateTung()">'+ select+ '</select></div></div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">楼层名称</span></div>'+ '<div style="display: inline-block;"><select class="form-control" id="pandectXml0" onchange="updateFloor()">'+ floordata+ '</select><input type="hidden" id="buildid" value="'+buildid+'"></div></div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室名称</span></div>'+ '<div style="display: inline-block;"><input type="text" id="meetingnameadd" value="'+meetingnameupdate+'"></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室类型</span></div>'+ '<div style="display: inline-block;"><select id="meetingtypeadd">'+ typesdata+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室规格</span></div>'+ '<div style="display: inline-block;"><select id="meetingspecsadd">'+ specsesdata+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">会议室状态</span></div>'+ '<div style="display: inline-block;"><select id="meetingstatusadd">'+ statusdata+ '</select></div>'+ '</div>'+ '<div style="display: inline-block;width:100%;">'+ '<div style="display: inline-block;width:20%;"><span style="padding-left:6%;">中控IP</span></div>'+ '<div style="display: inline-block;"><input type="text" id="IPadd" onblur="addIP()" value="'+ipupdate+'"><input type="hidden" id="meetingidupdate" value="'+meetingid+'"></div>'+ '</div>'+ '</div>' ,btn: ['修改', '取消'] //只是为了演示 ,yes: function(){ updatemeetingclassroom(); } ,btn2: function(){ layer.closeAll(); } ,zIndex: layer.zIndex //重点1 ,success: function(layero){ layer.setTop(layero); //重点2 } }); } }) } var updatemeetingclassroom = function(){ var buildid = $("#buildid").val(); var meetingid = $("#meetingidupdate").val(); var meetingname = $("#meetingnameadd").val(); var pandectXmlFile0 = $("#pandectXmlFile0 option:selected").val(); var pandectXml0 = $("#pandectXml0 option:selected").val(); var meetingtype = $("#meetingtypeadd option:selected").val(); var meetingtype = $("#meetingtypeadd option:selected").val(); var meetingspecs = $("#meetingspecsadd option:selected").val(); var meetingstatus = $("#meetingstatusadd option:selected").val(); var ip = $("#IPadd").val(); if((pandectXmlFile0 == null) || (pandectXmlFile0 =="")){ alert("楼栋不能为空"); return null; } if((pandectXml0 == null) || (pandectXml0 =="")){ alert("楼层不能为空"); return null; } if((meetingname == null) || (meetingname =="")){ alert("会议室名称不能为空"); return null; }else{ meetingname = meetingname.trim(); } if((meetingtype == null) || (meetingtype =="")){ alert("会议室类型不能为空"); return null; } if((meetingspecs == null) || (meetingspecs =="")){ alert("会议室规格不能为空"); return null; } if((meetingstatus == null) || (meetingstatus =="")){ alert("会议室状态不能为空"); return null; } if((ip == null) || (ip =="")){ alert("中控IP不能为空"); return null; }else{ ip = ip.trim(); } $.ajax({ url:"updateMeetingClassroom", type:"post", dataType:"json", data:{ "buildid":buildid, "meetingname":meetingname, "meetingtype":meetingtype, "meetingspecs":meetingspecs, "meetingstatus":meetingstatus, "meetingid":meetingid, "ip":ip }, error: function(){ console.log("查询出错"); }, success:function(data){ if(data.state == 0){ layer.closeAll(); layui.table.render({ elem: '#test' ,height: '500px' ,method:'POST' ,url: 'selectMeetingClassroomBuildPage' //数据接口 ,skin: 'nob' //行边框风格 ,even: true //开启隔行背景 ,request: { pageName: 'page', limitName: 'count' } ,parseData: function(res){ //res 即为原始返回的数据 for(i in res.data){ res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname; if(res.data[i].meetingtype==1){ res.data[i].meetingtypes="小型讨论室"; }else if(res.data[i].meetingtype==2){ res.data[i].meetingtypes="演讲会议室"; }else{ res.data[i].meetingtypes="视频会议室"; } if(res.data[i].meetingspecs==1){ res.data[i].meetingspecss="9人"; }else if(res.data[i].meetingspecs==2){ res.data[i].meetingspecss="20人"; }else if(res.data[i].meetingspecs==3){ res.data[i].meetingspecss="50人"; }else{ res.data[i].meetingspecss="100人"; } if(res.data[i].meetingstatus==1){ res.data[i].meetingstatuss="空闲"; }else if(res.data[i].meetingstatus==2){ res.data[i].meetingstatuss="使用中"; }else{ res.data[i].meetingstatuss="故障"; } } return { "code": res.state, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; }, page: true //开启分页 , cols: [[ {type: 'checkbox', fixed: 'left'}, { field: 'location', title: '会议室地点', style:'text-align:center' }, { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' }, { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'}, { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'}, { field: 'ip', title: '中控IP' , style:'text-align:center'}, { title: '操作', templet:function(d){ return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+' onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>' }, style:'text-align:center'} ]] }); $("th,.layui-table-header").css({ "background-color": "#000000", "color": "white", "text-align": "center" }); } selectAllBuild(); alert(data.message); } }) } function addIP(){ var ip = $("#IPadd").val(); //判断是否为ip格式 var ipVerification = /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/; if(!ipVerification.test(ip)){ alert('IP地址格式不正确!'); $("#IPadd").val(""); return false; } } var delmeetingclassroom = function(teg){ $.ajax({ url:"deletemeetingclassroom", type:"post", dataType:"json", data:{ "meetingids":teg }, error: function(){ console.log("查询出错"); }, success:function(data){ if(data.state == 0){ layer.closeAll(); layui.table.render({ elem: '#test' ,height: '500px' ,method:'POST' ,url: 'selectMeetingClassroomBuildPage' //数据接口 ,skin: 'nob' //行边框风格 ,even: true //开启隔行背景 ,request: { pageName: 'page', limitName: 'count' } ,parseData: function(res){ //res 即为原始返回的数据 for(i in res.data){ res.data[i].location =res.data[i].tung+"栋"+res.data[i].floor+"楼"+res.data[i].meetingname; if(res.data[i].meetingtype==1){ res.data[i].meetingtypes="小型讨论室"; }else if(res.data[i].meetingtype==2){ res.data[i].meetingtypes="演讲会议室"; }else{ res.data[i].meetingtypes="视频会议室"; } if(res.data[i].meetingspecs==1){ res.data[i].meetingspecss="9人"; }else if(res.data[i].meetingspecs==2){ res.data[i].meetingspecss="20人"; }else if(res.data[i].meetingspecs==3){ res.data[i].meetingspecss="50人"; }else{ res.data[i].meetingspecss="100人"; } if(res.data[i].meetingstatus==1){ res.data[i].meetingstatuss="空闲"; }else if(res.data[i].meetingstatus==2){ res.data[i].meetingstatuss="使用中"; }else{ res.data[i].meetingstatuss="故障"; } } return { "code": res.state, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": res.data //解析数据列表 }; }, page: true //开启分页 , cols: [[ {type: 'checkbox', fixed: 'left'}, { field: 'location', title: '会议室地点', style:'text-align:center' }, { field: 'meetingtypes', title: '会议室类型', style:'text-align:center' }, { field: 'meetingspecss', title: '会议室规格' , style:'text-align:center'}, { field: 'meetingstatuss', title: '会议室状态' , style:'text-align:center'}, { field: 'ip', title: '中控IP' , style:'text-align:center'}, { title: '操作', templet:function(d){ return '<a class="layui-btn layui-btn-xs '+"layui-bg-blue"+'" '+' onclick=\''+("toreturn")+'('+JSON.stringify(d)+')\'>'+"修改"+'</a>' }, style:'text-align:center'} ]] }); $("th,.layui-table-header").css({ "background-color": "#000000", "color": "white", "text-align": "center" }); } selectAllBuild(); alert(data.message); } }) } function selectAllBuild(){ $.get("selectAllMeetingBuilds",{},function(o){ o = JSON.parse(o); for(i in o.data){ contents[o.data[i].tung]={}; } for(i in o.data){ contents[o.data[i].tung][o.data[i].floor]=[]; } for(i in o.data){ if(contents[o.data[i].tung][o.data[i].floor].name==undefined) contents[o.data[i].tung][o.data[i].floor].name = []; if(contents[o.data[i].tung][o.data[i].floor].id==undefined) contents[o.data[i].tung][o.data[i].floor].id = []; contents[o.data[i].tung][o.data[i].floor].name.push(o.data[i].meetingname); contents[o.data[i].tung][o.data[i].floor].id.push(o.data[i].meetingid); } console.log(contents); drawContents(contents); }) } function drawContents(contents){ $("#buildnav").html(""); $("#buildnav").append('<p style="width:100%;"><input style="width:100%;" type="text" class="search-query" placeholder="搜索"></p><h2 style="padding-top:3%;">会议室列表</h2><p style="height:15px;"></p>') for(var v in contents){ $("#buildnav").append('<ul data-tung="'+v+'" class="nav metro-nav-list" >'+"<a class='meeting-title'>第"+v+"栋</a><li class='tung'></li></ul>") for(var f in contents[v]){ $("ul[data-tung="+v+"]").find(".tung").append("<a style='color:#4F1ACB;'>"+f+"楼</a><ul data-floor='"+f+"' class='floor nav'></ul>"); for(c in contents[v][f].id){ if(contents[v][f].name[c] != undefined) $("ul[data-floor="+f+"]").append('<li><a class="room" style="color:#4F1ACB;" data-room=" '+contents[v][f].id[c]+'" data-name="'+contents[v][f].name[c]+'">'+contents[v][f].name[c]+'</a></li>'); } } } $(".room").click(function(){ switchcontent($(this).data("room"),$(this).data("name")); }) } function switchcontent(room,name){ $("#layout").attr("src","toPage?name=meeting-control-classroom&cid="+room+"&cname="+name); }
-
layui的table中显示图片方法
2020-12-10 18:30:17图片需要用到模板.templet: ... var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,page:true ,cols:[[ {field:'needs_id',title: -
【Layui】------ Layui Table 点击行选中示例代码
2021-01-12 00:46:33layui table 点击行选中实例//单击行勾选checkbox事件$(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {var index = $(this).attr('data-index');var tableBox = $(this).... -
layui - 模板引擎
2020-12-07 14:48:58模板:layui.use('laytpl', function(){ var laytpl = layui.laytpl; } 参考:https://www.layui.com/doc/modules/laytpl.html 模板语法: // 除函数外,模板以分隔符 {{# 开始,并以 }} 结束 // {{d.field }} ... -
LayUI简单页面模板.zip
2020-10-19 13:18:04该模板适用于Java后端开发的管理系统简单模板(包括简单的登录页面,添加页面,修改页面.......) -
layui-table对返回的数据进行转变显示的实例
2020-12-09 20:41:58在使用layui表格时,在ajax请求回来的数据,有时候需要我们处理之后显示 1.比如性别sex这个字段,后台可能返回的是1.或者 2;那我们总不能显示1.和 2,我们需要显示男和女,这里就用到了自定义模板了 [removed] {... -
layui.table中加判断(显示|隐藏)
2022-04-29 14:26:42多种情况下的layui.table中加判断(显示|隐藏) -
layui自定义模板
2020-09-18 16:21:49templet:自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等,单元格的内容是完全按照数据接口返回的content原样输出... -
VUE layui之table数据表格使用详细说明
2021-09-06 14:38:42一:layui官网下载包 二:将解压的文件放入static文件夹(如果没有就在根目录下新建一个) 三:public文件下index.html中引入css及js文件 <!-- 引入 layui.css --> <link rel="stylesheet" href="//... -
layui表格使用自定义模板templet
2019-07-27 12:27:13在前端系列(二)中,layui table模块的优点得到了初步体现:简捷方便,美观优雅,后续的文章将继续对layui table模块进行总结,我们将体会到它的另一个优点:功能丰富。 根据前文步骤,将数据库数据通过layui table... -
layui的table工具栏按钮失效怎么解决?
2020-12-19 11:49:08layui的table工具栏按钮失效怎么解决?发布时间:2020-05-28 16:38:58来源:亿速云阅读:574作者:鸽子1. Html页面号码:搜索新增用户删除用户2. 对应的jslayui.use(['form','layer','table'],function(){var form = ... -
html基于layui实现的博客模板.zip
2021-11-24 16:23:44html基于layui实现的博客模板. -
lay-ui-模板_layui_
2021-10-01 17:11:47一款非常使用且简单的前端框架,适合简单简单项目和初学者使用 -
Layui Table 重载封装
2020-09-18 15:34:12Layui Table 重载封装 近期工作中前端使用到了layui的 table ,就避免不了数据的查询,所以就封装可一个通用的重载方法。 后台动态组装条件 layui.define(['table'], function (exports) { var $ = layui.$ , layer... -
layui table
2021-08-16 20:57:201.off移除on绑定的事件 2.列checkbox列single属性单选 3.render时changes属性可以动态改变...table class="layui-table" lay-filter="tbUsers" id="tbUsers"> <thead> <tr> <th lay-data="{ -
Layui Table中整合radio 单选框,选中与取消的方法
2019-11-21 16:53:39场景:加载table时需要指定一个默认的选中,需要在做其他动作时取消选中 尝试了很多方法都无效,最后找到layui论坛相关资料,问题解决 done:function(res,curr,count) { for (let i = 0; i <res.data.length ; i+... -
jquery动态赋值layui table数据
2020-10-29 15:27:43table class="layui-table" id="productTest" style="width: 100%;"> <thead> <tr id="template"> <th id="productname">商品名称</th> <th id="nowprice">现价</th&... -
layui table 实现分页
2021-06-08 19:48:27之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下。 使用之前请先详细阅读layer的文档:http://www.layui.com/doc/modules/layer.html 首先下载最新版的layui文件... -
layui-table-column-select(layui数据表格可搜索下拉框select)
2021-01-14 11:46:37layuiTableColumnEdit在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表及日期时间选择器。一、介绍此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)及日期时间选择... -
基于layUI家居商城模板.zip
2022-07-15 15:40:41家居商城模板,核心采用layui。 详情: 1、基于layUI框架开发的前端静态模板,开箱即用。 2、只需要稍加修改变可以完美复用。 3、提供最新的layUI官网地址:https://layui.gitee.io/v2/ 4、参考官网可以快速对... -
Layui table 使用记录:table 排序;select多选
2022-03-23 16:32:22Layui table 使用记录 表头筛选并记录 本地保存记录,参考链接:实现layui table筛选框记忆功能 开启表头筛选功能 defaultToolbar: ['filter'] 表头工具 : 文档 table.render({ //其它参数在此省略 ...
收藏数
3,155
精华内容
1,262