Layui

1.输入框只限度了内容类型为number，不要求必须然而也校验了：<div class="layui-form-item"> <label class="layui-form-label">占地面积（m2）</label> <div class="layui-input-block"> <input type="text" id="area" name="area" lay-verify="number" placeholder="请输出占地面积（m2）" value="" class="layui-input"> </div></div>2.如下：只限定了条件：lay-verify="number"然而后果却是：lay-verify="required|number"的，依据如图批改源码即可解决 3.解决方案：即：phone/email/url/identity都加 (^$)number则由!e||isNaN(e)改为 e&&isNaN(e)即可

问题形容：layui表格渲染时因为异步申请数据问题，当用户短时间内频繁申请数据或者短时间外在表格获取数据期间又去抉择其余条件进行从新查问，就很可能就会导致表格中的数据和想要的数据不统一，甚至还会造成点击表格详情时获取的数据和界面上的数据不统一，而后跳转的页面的数据不对。 解决解决方案是限度用户短时间内频繁对表格数据查问，得出以下几个计划： 1.对申请进行防抖2.当申请前立刻对前一个未实现的雷同申请进行abort打断3.申请前对查问按钮disable，申请实现时才可点击4.申请前弹出加载层挡住界面，让用户期间不可操作,当done渲染实现再敞开加载层 这里咱们应用第4种办法，对表格申请进行一个公共的封装，在表格申请数据前弹出layui的加载层来避免用户持续操作，保留加载层的id（tableIdx）来进行敞开，对表格加载实现的回调进行一个包装，而后在表格数据申请实现时敞开加载层，敞开加载层代码： if (paramsOBJ.parseData) { var parseData = paramsOBJ.parseData paramsOBJ.parseData = function (res) { layer.close(window.tableIdx); return parseData(res) } } if (paramsOBJ.done) { //二次封装done渲染实现敞开加载层 var done = paramsOBJ.done; paramsOBJ.done = function (res, curr, count) { layer.close(window.tableIdx); return done(res, curr, count); }; } else { paramsOBJ.done = function (res, curr, count) { layer.close(window.tableIdx); }

Layui表格头部表单筛选条件过多时的折叠与开展成果实现-折叠状态效果图： -开展状态效果图： 具体实现代码： <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">查问发送记录</div> <div class="layui-card-body"> <form class="layui-form" action="" id="search_form"> <div class="layui-form-item"> <div class="layui-fluid"> <div class="layui-row"> <div class="layui-col-xs3"> <div class="layui-inline"> <label class="layui-form-label">开始工夫</label> <div class="layui-input-inline"> <input type="text" name="sdate" class="layui-input" id="sdate" placeholder="请抉择开始工夫"> </div> </div> </div> <div class="layui-col-xs3"> <div class="layui-inline"> <label class="layui-form-label">完结工夫</label> <div class="layui-input-inline"> <input type="text" name="edate" class="layui-input" id="edate" placeholder="请抉择完结工夫"> </div> </div> </div> <div class="layui-col-xs3"> <div class="layui-inline"> <label class="layui-form-label">短信内容</label> <div class="layui-input-inline"> <input type="text" name="content" class="layui-input" id="content" placeholder="请输出短信内容"> </div> </div> </div> <div class="more-container"> <div class="layui-col-xs3"> <div class="layui-inline"> <label class="layui-form-label">手机号码</label> <div class="layui-input-inline"> <input type="text" name="mobile" class="layui-input" id="mobile" placeholder="请输出手机号码"> </div> </div> </div> <div class="layui-col-xs3"> <div class="layui-inline"> <label class="layui-form-label">提交人</label> <div class="layui-input-inline"> <input type="text" name="user" class="layui-input" id="user" placeholder="请输出提交人"> </div> </div> </div> </div> <div class="layui-col-xs3"> <div class="layui-inline"> <div class="layui-input-inline"> <button class="layui-btn" lay-submit lay-filter="fsjl"><i class="layui-icon layui-icon-search"></i>查问</button> <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button> <button class="layui-btn layui-btn-normal more-btn" lay-filter="more"><i class="layui-icon layui-icon-addition"></i>开展</button> </div> </div> </div> </div> </div> </div> </form> </div> </div> </div><script> $(".more-btn").click(function () { if ($(".more-container").is(":hidden")) { $(".more-container").show(); //如果元素为暗藏,则将它浮现 $(".more-btn").html('<i class="layui-icon layui-icon-subtraction"></i>收起') } else { $(".more-container").hide(); //如果元素为浮现,则将其暗藏 $(".more-btn").html('<i class="layui-icon layui-icon-addition"></i>开展') } return false; })</script><style> .layui-form-label { padding: 9px 0px; text-align: center; } .layui-form-item .layui-inline { margin-bottom: 14px; } .layui-form-item .layui-input-inline { width: auto !important; } .layui-btn{ padding:0 10px; } .more-container { display: none; }</style>

前言：在layui开发中 在表格中的每一行记录单元格里展现下拉框和单选框，间接从表格上对数据进行更新。省的再弹窗来对数据进行批改，那么如何实现呢？？ 首先确定表格的dom构造： <div class="tableTab_box" style="padding: 0px 10px"> <div class="layui-form"> <table id="tList" lay-even lay-skin="nob" class="layui-table"></table> </div> </div>而后在表格下方退出layui独有的数据行模版块、d就是以后行的数据咱们须要在每一行的单元格中应用radio、checkbox（layui开关）因为每一行记录的input的职责是针对它本人所在行的进行数据操作，所以就须要利用agentId为每行记录中的input进行惟一标识，从而实现通过监听组件的变动并获取对应的agentId进行相应数据的批改。其次因为多条记录中多个input的name不能雷同起因，所以须要加上name="extension-{{d.agentId}}"让name都是惟一的 <script type="text/html" id="extensionTpl"> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="1" title="1级" lay-filter="extension" {{ d.extension == "1" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="2" title="2级" lay-filter="extension" {{ d.extension == "2" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="3" title="3级" lay-filter="extension" {{ d.extension == "3" ? 'checked' : ''}}> </script>接下来是开关的，逻辑也是根本一样 <script type="text/html" id="onlineTpl"> <div> <input type="checkbox" name="online-{{d.agentId}}" data-agentid="{{d.agentId}}" lay-skin="switch" lay-text="在线|离线" lay-filter="online" {{ d.online == 1 ? 'checked' : ''}}> </div> </script>最终所有的html构造如下 <div class="tableTab_box" style="padding: 0px 10px"> <div class="layui-form"> <table id="tList" lay-even lay-skin="nob" class="layui-table"></table> </div> <script type="text/html" id="extensionTpl"> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="1" title="1级" lay-filter="extension" {{ d.extension == "1" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="2" title="2级" lay-filter="extension" {{ d.extension == "2" ? 'checked' : ''}}> <input type="radio" name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="3" title="3级" lay-filter="extension" {{ d.extension == "3" ? 'checked' : ''}}> </script> <script type="text/html" id="onlineTpl"> <div> <input type="checkbox" name="online-{{d.agentId}}" data-agentid="{{d.agentId}}" lay-skin="switch" lay-text="在线|离线" lay-filter="online" {{ d.online == 1 ? 'checked' : ''}}> </div> </script></div> 上面来看js逻辑：首先是定义表格数据的初始化。这里就是惯例的表格数据定义 。值得注意的是表格渲染实现(done)中对单元格有一个解决，避免渲染后的单元格挡住下拉选项。 ...

我的项目简介负责写一个广告投放后盾治理平台的一个页面。可实现删除、编辑增加等性能，因为原来的管理系统由JSP开发不便更改，所以最初将新写的页面间接嵌入进原来的管理系统，相当于是齐全独立出的一个页面。 次要技术利用layUI框架开发、JSON传送数据、Ajax响应接口。 问题形容一、表头和表单元素无奈对齐。二、通过 storage 取得的数据无奈用innerHTMl渲染进input框，如代码所示。 document.getElementById("ad_title").innerHTML= data.title;三、利用option val（）无奈取得下拉列表的被选择项。 四、无奈获取表格中复选框checkbox被选中项的数据。 五、点击增加按钮，进入弹层界面，页面呈现长长地滚动条（不是由内容引起）。六、利用Ajax申请接口传送数据。 问题剖析一、表头和表单元素无奈对齐。因为代码中呈现了一个不该呈现的“，”。改过来即可，以下为正确显示后果。 二、通过 storage 取得的数据无奈用innerHTMl渲染进input框，如代码所示。 document.getElementById("ad_title").innerHTML= data.title;input是单标签，所以用innerHTML无奈渲染，必须要用value才能够扭转，最初批改如下。 document.getElementById("ad_title").value= data.title;三、利用option val（）无奈取得下拉列表的被选择项。复选框的被选择项应该通过text取得。 var statusArray=["启动","禁止"]; var statusString=$("#ad_action option:selected").text();//状态 console.log(statusString);四、checkStatus('adInfo')中开始写的是lay-filter的值，所以无奈获取数据，应该应用办法渲染表格定义的id。 var checkStatus = table.checkStatus('adInfo'),data = checkStatus.data,AD_id = "";五、这里的编辑界面通过跳转另一个HTML页面实现，运行发现下方总是呈现呈现长长的滚动条，而外面蕴含的内容并没有越界，也没有定义其余的款式。起初通过查看调试工具发现，并不是由layUI自带属性造成的，而是我的项目开始一个CSS文件中定义了一个width，导致每次盒子的width都超出了范畴。六、发送数据post申请数据get 七、工夫组件简略应用 参考文档layUI官网文档layui框架列表监听checkbox选中数据的值layui加载表格，绑定新增，编辑删除，查看按钮事件本地存储（Local Storage）

从后端获取表头 function initTable() { $.ajax({ url: "getList", method: "post", data: {...}, success: function (res) { var cols = [ { title: "No.", type: "numbers", fixed: "left", width: 40, }, ]; for ( var i = 1, len = Object.keys(res.data[0]).length; i <= len; i++ ) {//创立闭包环境，避免变量援用谬误的问题 (function (i) { var field = "key" + i;//后端传来的表头属性名key1，key2。。。 var fieldObj = { field: field, title: res.data[0][field], }; if (i > 1) { fieldObj.templet = function (d) {//自定义数据模版 return ( "<div>" + d[field] + "</div>" ); }; } cols.push(fieldObj); })(i); } res.data.shift(); //删除表头项，渲染表格 console.log(cols); layui.table({ elem: "#tableid", height: '500', cols: [cols], data: res.data, limit: res.data.length, }); }, error: function (resp) { layer.msg(resp.msg); }, });

LayUI次要内容 ----LayUI 的装置及应用LayUI 的介绍 layui（谐音：类UI) 是一款采纳本身模块标准编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织模式，门槛极低，拿来即用。 由国人开发，16年出厂的框架，其次要提供了很多难看、不便的款式，并且根本拿来即用，和Bootstrap有些类似，但该框架有个极大的益处就是定义了很多前后端交互的款式接口，如分页表格，只需在前端配置好接口，后端则依照定义好的接口规定返回数据，即可实现页面的展现，极大缩小了后端人员的开发成本。 官网：https://www.layui.com 官网文档：https://www.layui.com/doc/ LayUI 的特点（1）layui属于轻量级框架，简略好看。实用于开发后端模式，它在服务端页面上有十分好的成果。 （2）layui是提供给后端开发人员的ui框架，基于DOM驱动。 下载与应用在 官网首页 下载到 layui 的最新版。目录构造如下： ├─css // css目录 │ │─modules // 模块css目录（个别如果模块绝对较大，咱们会独自提取，比方上面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 外围款式文件 ├─font // 字体图标目录 ├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay // 模块外围目录 │ └─modules // 各模块组件 │─layui.js // 根底外围库 └─layui.all.js // 蕴含layui.js和所有模块的合并文件 取得 layui 后，将其残缺地部署（拷贝到我的项目中）到你的我的项目目录，你只须要引入下述两个文件：./layui/css/layui.css./layui/layui.js // 提醒：如果是采纳非模块化形式，此处可换成：./layui/layui.all.js 根本的入门页面<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始应用layui</title> <link rel="stylesheet" href="layui/css/layui.css"></head><body> <!-- 你的HTML代码 --> <script src="layui/layui.js"></script><script> // 模块和回调函数 // 个别间接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> </body></html> 还须要申明须要应用的 模块 和 回调函数。参照官网文档，抉择本人想要的成果就行。 ...

上效果图： 参考教程1 参考教程2 <div id="work_div" class="open-form layui-form" bind_id="0" style="display: none;"> <div id="test2" ></div></div>var work_detail = function(e){ var data_id = $(e.srcElement).attr("id"); var bind_id = $('#work_div').attr('bind_id'); if(bind_id != data_id){ var week_day = $(e.srcElement).attr("week_day")?$(e.srcElement).attr("week_day").split(','):[]; //下发数据是"0,1,3" 0是周天 var rest_date = $(e.srcElement).attr("rest_date")?$(e.srcElement).attr("rest_date").split(','):[]; //下发数据是"2020-11-9,2020-11-10,2020-11-11," 数据格式要和laydate 定义统一，下发解决format(Y-n-j)，月日不补零 var work_name = '早班'; var work_time = '00:02 01:00-05:00'; var mark_class = ''; week_day.forEach(function (val, index) { mark_class += '.layui-laydate-content td:nth-child('+val+'),' }); mark_class = mark_class.substring(0, mark_class.length-1) $('#work_div').attr('bind_id', data_id) $('#work_div').html('<div id="test2" ></div>' + '<div><div>班次详情</div><div>'+work_name+' '+work_time+'</div></div>'); layui.use('laydate', function(){ var laydate = layui.laydate; laydate.render({ elem: '#test2' ,position: 'static' ,showBottom: false ,change: function(value, date){ //监听日期被切换 if(week_day.length>0){ var choosedate = $(mark_class).addClass('work_date');//选中所有显示日期的td choosedate.each(function (index,elem) { if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){ $(this).removeClass('work_date'); } }) $('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");//在选中的td中退出显示价价格的div } } ,ready: function(date){ if(week_day.length>0){ var choosedate = $(mark_class).addClass('work_date');//选中所有显示日期的td choosedate.each(function (index,elem) { if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){ $(this).removeClass('work_date'); } }) $('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");//在选中的td中退出显示价价格的div } } }); }); } layer.open({ type: 1 ,title: "排班详情" ,area: '650px' ,shade: [0.8, '#393D49'] ,shadeClose:true ,maxmin: true ,content: "#work_div" ,btn: [确定，勾销] ,zIndex:999 ,yes: function(index){ } ,btn2: function(){ layer.closeAll(); } ,success: function(layero,index){ } ,end: function(){ }}); };

top.layui.form.on('submit(myOrdersList-search)', function(data){ var field = data.field; table.reload('myOrdersListTable', { where: $.extend({page:1},field) }); search_field = field; top.layui.layer.close(top.layui.admin.popup.index); });要害代码： where: $.extend({page:1},field)

top.layui.form.on('submit(auditEgressionTodoList-refresh)', function(data){ top.layui.$(':input').not(':button, :submit, :reset').val('').removeAttr('selected').removeAttr('checked') search_field = {}; top.layui.form.render(); table.reload('auditEgressionTodoList', { where: $.extend({ userName:null, companyName:null, beginTimeStart:null, beginTimeEnd:null, endTimeStart:null, endTimeEnd:null, withType:null, status:null, createTimeStart:null, createTimeEnd:null, },where) }); });$.extend 的第一个参数：为搜寻字段， 须要全副置为 null

其中一列： {field:'companyName', title: '公司名称', align: 'center',minWidth:200,templet:tplCompanyName }模板办法： var tplCompanyName = function (d) { var html = '<a style="color:#1E9FFF" href="javascript:void(0);" lay-event="showRec" >'+d.companyName+'</a>'; return html; }事件监听： table.on('tool(myOrdersListTable)', function(obj){ switch(obj.event){ case 'showRec': active.showRec(obj); break; } });而后定义active.showRec(obj); var active = { showRec:function(obj){ //...do your things }}

关上的页面为一个页签 top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息')businessUserShow.jsp: <script> layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'form','dict','laytpl','util','element'], function(){ var $ = layui.$ ,form = layui.form; var dict = layui.dict; var laytpl = layui.laytpl; var util = layui.util; var router = layui.router(); var admin = layui.admin; var formData = window.parent.formData; var self = null; try{ self = router.search.self; if(self==1){// top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息') var curUser = layui.data(layui.setter.tableName)[layui.setter.userKey]; var rtn = admin.syncReq(ctx+'/business/businessUser/queryById',{id:curUser.id}) if(rtn.code==0){ formData = rtn.data; } } }catch (err){ self = null; }要害代码： ...

表单中有一个接管明细的子列表，html: <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">接管明细</div> <div class="layui-card-body" style="height: 200px;"> <table class="layui-hide" id="companyPaperRecordDetailListTable" lay-filter="companyPaperRecordDetailListTable"></table> <script type="text/html" id="companyPaperRecordDetailListTable-toolbar"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-xs" data-type="addRec">增加</button> </div> </script> <script type="text/html" id="companyPaperRecordDetailListTable-bar"> <a class="layui-btn layui-btn-xs" lay-event="editRec">编辑</a> <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delRec">删除</button> </script> </div> </div> </div>js : var detailList = []; var detailTable = table.render({ elem:'#companyPaperRecordDetailListTable' ,data:detailList ,cellMinWidth: 80 ,toolbar: '#companyPaperRecordDetailListTable-toolbar' ,defaultToolbar: [] ,cols: [[ ,{field:'licenceName', title: '证照名称', align: 'center',minWidth:150 } ,{field:'certType', title: '证件类型', align: 'center',width:130,templet:tplCertType} ,{field:'cnt', title: '数量', align: 'center',width:130} ,{field:'attachment', title: '附件', align: 'center',width:160,templet:tplAttachment } ,{title:'操作', toolbar: '#companyPaperRecordDetailListTable-bar', width:150} ]] ,height: '200' ,done: function(res, curr, count){ } });监听表格事件： ...

解决办法：间接用html解决元素的办法，在table的done办法解决： ,done: function(res, curr, count){ var divArr = $(".layui-table-total div.layui-table-cell"); $.each(divArr,function (index,item) { var _div = $(item); var content = _div.html(); content = content.replace(".00",""); _div.html(content); }); }

表格div: <div style="width: 100%;overflow-x: auto;"> <table class="layui-hide" id="businessMenuListTable" lay-filter="businessMenuListTable"></table></div>js,引入treeTable layui.config({ base: '${ctxLayui}/layuiadmin/'}).extend({ index: 'lib/index'}).use(['index', 'table','dict','laydate','util','treeTable'], function(){ var $ = layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util; var treeTable = layui.treeTable;treeTable 下载：https://fly.layui.com/extend/... 表格： var insTb = treeTable.render({ elem: '#businessMenuListTable', tree: { iconIndex: 1, // 折叠图标显示在第几列 idName: 'id', // 自定义id字段的名称 pidName: 'parentId', // 自定义标识是否还有子节点的字段名称 }, cols: [ {type: 'checkbox', fixed: 'left'}, {field: 'name', title: '名称', width: 220}, {field: 'url', title: '门路'}, {field: 'perm', title: '按钮权限', width: 200}, {field: 'type', title: '菜单类型', width: 100,templet:tplType}, {field: 'sortOrder', title: '排序', width: 100}, {field: 'status', title: '状态', width: 100,templet:tplStatus}, {title:'操作', toolbar: '#businessMenuListTable-bar', width:120} ], reqData: function(data, callback) { // 在这里写ajax申请，通过callback办法回调数据 var pid = data?data.id:0; var children = data?(data.children?data.children:null):null; if(children && children.length>0){ return callback(children); } var url = ctx+'/business/businessMenu/queryByAll'; var rtn = admin.syncReq(url,{parentId:pid}); var rtnData = rtn.data; $.each(rtnData,function (index,item) { if(item.type!=4){ item.haveChild = true; } }) callback(rtnData); } ,height: 'full-99'});点击节点 ，会调用：reqData而后依据条件， callback(rtnData); 会从新渲染列表。 ...

layui.define(['jquery','form'], function(exports){ var $ = layui.jquery; var form = layui.form; var element = layui.element; /*var dictJson = { "status":[[1,"失常"],[2,"禁用"]], "yesNot":[[1,"是"],[2,"否"]], "bool":[[true,"是"],[false,"否"]] };*/ var dictJson = layui.sessionData(layui.setter.tableName).dictJson; var obj = { /** * * @param treeList * 构造(javaBean)： * private String name; * private String code; * //代码类型1-int 2-bool 3-string private Integer type; private Long parentId; private Integer sortOrder; private List<BaseCategoryPo> children = new ArrayList<BaseCategoryPo>(); * @returns 返回格局示例： * { "status":[[1,"失常"],[2,"禁用"]], "yesNot":[[1,"是"],[2,"否"]], "bool":[[true,"是"],[false,"否"]] }; */ treeToDictJson:function (treeList) { var rtnJson = {}; for(var i=0;i<treeList.length;i++){ var vo= treeList[i]; var code = vo.code; var type = vo.type; var children = vo.children; if(children){ var dictArr = []; for(var j=0;j<children.length;j++){ var dictRec = []; var c_vo = children[j]; var c_name = c_vo.name; var c_code = c_vo.code; var c_type = c_vo.type; if(type==1){ dictRec.push(parseInt(c_code)) }else if(type==2){ dictRec.push(c_code=='true'?true:false) }else { dictRec.push(c_code); } dictRec.push(c_name); dictArr.push(dictRec) } rtnJson[code] = dictArr; } } return rtnJson; }, options:function(name){ var list = dictJson[name]; if(!list){ return null; } return list; }, /** * layui 动静渲染select * @param id * @param name * @param defaultVal */ setSelect:function (id,name,defaultVal) { $("#"+id).empty(); $("#"+id).append(new Option("请抉择","")); var list = obj.options(name); if(!list){ return; } $.each(list,function(index,item){ var option = new Option(item[1],item[0]); if(item[0]==defaultVal){ option.selected=true; } $("#"+id).append(option) }); layui.form.render("select"); layui.element.render(); }, /** * 依据字典分类和值取显示值 * @param name 字典分类名称code * @param val 字典值 * @returns {string} 显示值 */ showName:function (name,val) { var list = obj.options(name); if(!list){ return ''; } var html = ''; $.each(list,function(index,item){ if(item[0]==val){ html = item[1] return; } }); return html; }, /** * layui 动静渲染radio * @param id * @param name * @param defaultVal */ setRadio:function (id,name,defaultVal) { $("#"+id).html(""); var list = obj.options(name); if(!list){ return; } $.each(list,function(index,item){ var radioHtml = '<input type="radio" name="'+name+'" value="'+item[0]+'" title="'+item[1]+'" '; if(item[0]==defaultVal){ radioHtml+='checked=""'; } radioHtml+='>'; $("#"+id).append(radioHtml) }); layui.form.render(); layui.element.render(); }, /** * layui 动静渲染switch * @param name * @param val */ setSwitch:function (name,val) { if(!val){ val = false; } var elem = $("[name="+name+"]"); if(val==0 || val==false){ elem.removeAttr("checked"); elem.val(false) }else{ elem.attr("checked",true); elem.val(true) } form.on('switch(form-switch)', function(data){ $(data.elem).val(data.elem.checked) }); } }; //输入接口 exports('dict', obj);});dict.js 文件地位：layuiadmin/modules/dict.js援用： ...

<div class="layui-form-item layui-form-item-my" >   <label class="layui-form-label">行业</label>   <div class="layui-input-block">      <div id="industrySel" ></div>      <input type="hidden" name="industryId" >      <input type="hidden" name="industry">   </div></div>var industryTreeData = [];      var rtnIndustry = admin.syncReq(ctx+'/base/baseIndustryCategory/industryTreeList',{});      if(rtnIndustry.code==0){          industryTreeData = rtnIndustry.data;}      var industryXmSelect = xmSelect.render({          el: '#industrySel',          prop:{name:'name',value:'id'},          clickClose:true,          radio:true,          filterable: true,          data: industryTreeData,          tree:{              show:true,              expandedKeys:[],              strict:false,          },          on:function (data) {              setTimeout(function () {                  var valueStr = industryXmSelect.getValue("valueStr");                  var nameStr = industryXmSelect.getValue("nameStr");                  if(valueStr){                      $("[name=industryId]").val(valueStr);                  }else{                      $("[name=industryId]").val("");                  }                  if(nameStr){                      $("[name=industry]").val(nameStr);                  }else{                      $("[name=industry]").val(nameStr);                  }              },500)          }      });      var industryId = formData.industryId;      if(industryId){          industryXmSelect.setValue((""+industryId).split(","))}成果： ...

treeTable 模块下载：https://gitee.com/whvse/treet... 下载后，treeTable.js、treeTable.css 的搁置目录别离为：layuiadmin/modules/treeTable.js layuiadmin/modules/treeTable/treeTable.css 页面元素： <div style="width: 100%;overflow-x: auto;"> <table class="layui-hide" id="businessConfigListTable" lay-filter="businessConfigListTable"></table></div>定义： layui.config({ base: '${ctxLayui}/layuiadmin/'}).extend({ index: 'lib/index'}).use(['index', 'table','dict','laydate','util','treeTable'], function(){ var $ = layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util; var treeTable = layui.treeTable; 渲染： var insTb = treeTable.render({ elem: '#businessConfigListTable', tree: { iconIndex: 1, // 折叠图标显示在第几列 idName: 'id', // 自定义id字段的名称 pidName: 'parentId', // 自定义标识是否还有子节点的字段名称 }, cols: [ {type: 'checkbox', fixed: 'left'}, {type: 'numbers',width: 120,style:'text-align:left'},// {field: 'id', title: 'ID',width: 180}, {field: 'type', title: '类型', width: 120,templet:tplType}, {field: 'name', title: '名称', width: 200}, {field: 'value', title: '值'}, {field: 'sortOrder', title: '排序', width: 120}, {field: 'status', title: '状态', width: 150,templet:tplStatus}, {title:'操作', toolbar: '#businessConfigListTable-bar', width:120} ], reqData: function(data, callback) { // 在这里写ajax申请，通过callback办法回调数据 var url = ctx+'/business/businessConfig/businessConfigTreeList'; var rtn = admin.syncReq(url,{}); var rtnData = rtn.data; for(var i=0;i<rtnData.length;i++){ var vo = rtnData[i]; vo.open = true; } callback(rtnData); } ,height: 'full-99' });接口：business/businessConfig/businessConfigTreeList， 如下： ...

用到dropdown 控件：地址：http://test.microanswer.cn/page/dropdown.html 引入css,js: <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/dropdown.css" media="all">layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'table','dict','laydate','util','element','dropdown'], function(){ var $ = layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util; var element = layui.element; var dropdown = layui.dropdown;操作列模板： <script id="myCompanyList-bar" type="text/html"> <button class="layui-btn layui-btn-xs" lay-filter="ft{{d.id}}" lay-dropdown="{template: '#bar_content',maxHeight:'600px;'}" > <span>操作</span> <i class="layui-icon layui-icon-triangle-d"></i> </button></script>bar_content 即为下拉多级按钮，也是模板：<script id="bar_content" type="text/html"> <div style="width:170px;"> <div class="layui-collapse"> <div class="layui-colla-item"> <h2 class="layui-colla-title" lay-event="header_h1" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i>&nbsp;&nbsp;税务查问</h2> <div class="layui-colla-content" lay-event="showTaxInfo" style="text-align:left;">税务注销</div> <div class="layui-colla-content" lay-event="showTaxCategory" style="text-align:left;">认定治理</div> <div class="layui-colla-content" lay-event="showTaxLevyOverdue" style="text-align:left;">申报征收查问</div> <div class="layui-colla-content" lay-event="showTaxSocialReocrd" style="text-align:left;">社保注销查问</div> <div class="layui-colla-content" lay-event="showTaxTicket" style="text-align:left;">发票业务</div> <div class="layui-colla-content" lay-event="showTaxLllegal" style="text-align:left;">守法违章</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title" lay-event="header_h2" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i>&nbsp;&nbsp;账务治理</h2> <div class="layui-colla-content" lay-event="showAccountNote" style="text-align:left;">做账要求</div> <div class="layui-colla-content" lay-event="showAccount" style="text-align:left;">做账记录</div> <div class="layui-colla-content" lay-event="showAccountProfile" style="text-align:left;">账务详情（年）</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title" lay-event="header_h3" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i>&nbsp;&nbsp;服务中心</h2> <div class="layui-colla-content" lay-event="showContacts" style="text-align:left;">联系人</div> <div class="layui-colla-content" lay-event="showServiceItem" style="text-align:left;">业务服务</div> <div class="layui-colla-content" lay-event="showException" style="text-align:left;">异样业务</div> <div class="layui-colla-content" lay-event="showItemWorkDetail" style="text-align:left;">服务进度</div> <div class="layui-colla-content" lay-event="showServiceUser" style="text-align:left;">服务人员</div> <div class="layui-colla-content" lay-event="showOrder" style="text-align:left;">合同记录</div> <div class="layui-colla-content" lay-event="showTask" style="text-align:left;">工作记录</div> <div class="layui-colla-content" lay-event="showWorkTask" style="text-align:left;">工单记录</div> <div class="layui-colla-content" lay-event="showPaper" style="text-align:left;">证照信息</div> <div class="layui-colla-content" lay-event="showQuality" style="text-align:left;">公司资质</div> <div class="layui-colla-content" lay-event="showAccountNumber" style="text-align:left;">账号信息</div> <div class="layui-colla-content" lay-event="showAddressee" style="text-align:left;">收件人</div> <div class="layui-colla-content" lay-event="showCompanyNoticeEvent" style="text-align:left;">告诉事件</div> <div class="layui-colla-content" lay-event="showCompanyWarn" style="text-align:left;">公司预警</div> <div class="layui-colla-content" lay-event="showCompanyTag" style="text-align:left;">公司标签</div> <div class="layui-colla-content" lay-event="showLog" style="text-align:left;">操作日志</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title" lay-event="header_h4" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i>&nbsp;&nbsp;业务管理</h2> <div class="layui-colla-content" lay-event="signOrder" style="text-align:left;">增加合同</div> <div class="layui-colla-content" lay-event="renewOrder" style="text-align:left;">续费合同</div> <div class="layui-colla-content" lay-event="addTask" style="text-align:left;">增加工作单</div> <div class="layui-colla-content" lay-event="addWorkTask" style="text-align:left;">添加工单</div> <div class="layui-colla-content" lay-event="addException" style="text-align:left;">标记异样</div> <div class="layui-colla-content" lay-event="recover" style="text-align:left;">复原服务</div> <div class="layui-colla-content" lay-event="editServiceDate" style="text-align:left;">批改服务工夫</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title" lay-event="header_h5" style="text-align:left;padding-left:8px;"><i class="layui-icon layui-icon-down"></i>&nbsp;&nbsp;税务治理</h2> <div class="layui-colla-content" lay-event="showDeclareRecord" style="text-align:left;">申报记录</div> <div class="layui-colla-content" lay-event="showSalary" style="text-align:left;">员工工资</div> <div class="layui-colla-content" lay-event="showSocial" style="text-align:left;">员工社保</div> <div class="layui-colla-content" lay-event="showProvidentFund" style="text-align:left;">员工公积金</div> <div class="layui-colla-content" lay-event="showInvoice" style="text-align:left;">开票治理</div> </div> </div> </div></script>表格js: ...

html: <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">材料清单</div> <div class="layui-card-body" style="height: 200px;"> <table class="layui-hide" id="serviceMaterialListTable" lay-filter="serviceMaterialListTable"></table> <script type="text/html" id="serviceMaterialListTable-toolbar"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" data-type="addMaterial">增加</button> </div> </script> <script type="text/html" id="serviceMaterialListTable-bar"> <%--<a class="layui-btn layui-btn-xs" lay-event="editMaterial">编辑</a>--%> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delMaterial">删除</a> </script> <script type="text/html" id="serviceMaterialTypeTpl"> <select name="type" lay-filter="service_material_type" autocomplete="off"> <option value="">请抉择</option> {{# var typeArr = layui.dict.options("service_materialType"); layui.each(typeArr, function(index, item){ }} <option value="{{item[0]}}" {{d.type==item[0]?'selected':''}}>{{item[1]}}</option> {{# }) }} </select> </script> <script type="text/html" id="certTypeTpl"> <select name="type" lay-filter="cert_type" autocomplete="off"> <option value="">请抉择</option> {{# var certTypeArr = layui.dict.options("company_paper_certType"); layui.each(certTypeArr, function(index, item){ }} <option value="{{item[0]}}" {{d.certType==item[0]?'selected':''}}>{{item[1]}}</option> {{# }) }} </select> </script> </div> </div> </div>办法： ...

表格html: <div class="layui-card-body companyPaperRecordList" style="padding:0;"> <div style="width: 100%;overflow-x: auto;"> <table class="layui-hide" id="companyPaperRecordListTable" lay-filter="companyPaperRecordListTable"></table> </div> </div>对应款式： <style> .companyPaperRecordList{ } .companyPaperRecordList .layui-table-cell { height: auto; white-space: normal; word-break: break-all; overflow: hidden; } .companyPaperRecordList .laytable-cell-checkbox{ padding: 20px 0 0 0; } </style>

附件列表html: <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">接管附件<span style="color:#1E9FFF;size: 10px;">&nbsp;&nbsp;(接管的证明文件)</span></div> <div class="layui-card-body" style="height: 100px;"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="attachment-upload">上传图片</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>文件名</th> <th>状态</th> <th>操作</th> </tr></thead> <tbody id="attachmentList"></tbody> </table> </div> </div> </div> </div> </div>js 局部： var attachmentList = []; var attachmentListView = $('#attachmentList') var uploadListIns = upload.render({ elem: '#attachment-upload' ,url: ctx+'/upload/uploadImages' ,accept: 'images' ,acceptMime: 'image/*' ,exts: 'jpg|jpeg|png|bmp|gif' //只容许上传压缩文件 ,multiple: true ,choose: function(obj){ var files = this.files = obj.pushFile(); //将每次抉择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td><a href="#" style="color:#1E9FFF" id="img_open_'+index+'" data-url="">'+ file.name +'</a></td>' ,'<td>待上传</td>' ,'<td>' ,'<button class="layui-btn layui-btn-mini test-upload-demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.test-upload-demo-reload').on('click', function(){ obj.upload(index, file); }); tr.find("a#img_open_"+index).on('click',function () { var url = $(this).attr("data-url"); if(url){ window.open(url); } }) //删除 tr.find('.test-upload-demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); attachmentList.splice(index,1); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，免得删除后呈现同名文件不可选 }); attachmentListView.append(tr); }); } ,done: function(res, index, upload){ if(res.code == 0){ //上传胜利 var tr = attachmentListView.find('tr#upload-'+ index) ,tds = tr.children(); var attachmentData = res.data; tds.eq(0).find("a#img_open_"+index).attr("data-url",attachmentData.url); tds.eq(1).html('<span style="color: #5FB878;">已上传</span>'); tds.eq(2).find('.test-upload-demo-reload').addClass('layui-hide'); //重传操作hide attachmentList.push(attachmentData.url); return delete this.files[index]; //删除文件队列曾经上传胜利的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = attachmentListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(2).find('.test-upload-demo-reload').removeClass('layui-hide'); //显示重传 } });当附件从后盾申请，(即已有数据)，从新渲染table的办法: ...

我的项目中的表单验证插件应用的是 jquery.validator 日期抉择插件应用的是laydate <form id="userRankForm" autocomplete="off"><input type\="text" id\="settlementDate" name\="settlementTime" data-rule\="required;" maxLength\="20" value\='' placeholder\='结算工夫'/></form>在点击input进行laydate非空验证后，抉择完日期不会再次触发jquery.validator验证，导致非空提醒始终显示解决办法：在laydate抉择完done办法内从新执行校验此input laydate.render({ elem: "#settlementDate", type:'datetime', min: 0, //最小可选值为以后日期前一天 done: function () { $("#userRankForm").validator($("#settlementDate")); } });

组件示例 如果须要更多材料点击下方图片加好友支付⬇（注明来意） 弹出层<font color="red">模块加载名称：layer，独立版本：layer.layui. com</font> 应用场景因为layer能够独立应用，也能够通过Layui模块化应用。所以请依照你的理论需要来抉择。 场景用前筹备调用形式1. 作为独立组件应用如果你只是独自想应用 layer，你能够去 layer 独立版本官网下载组件包。你须要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。通过script标签引入layer.js后，间接用即可。2. layui 模块化应用如果你应用的是 layui，那么你间接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但须要引入layui.css和layui.js通过layui.use('layer', callback)加载模块作为独立组件应用 layer <!-- 引入好layer.js后，间接用即可 --><script src="layer.js"></script><script> layer.msg('hello'); </script>在 layui 中应用 layer layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello');});根底参数type - 根本层类型 类型：Number，默认：0可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）title - 题目 类型：String/Array/Boolean，默认：'信息'title反对三种类型的值： 若传入的是一般的字符串，如 title :'我是题目'，那么只会扭转题目文本； 若须要自定义款式，能够title: ['文本', 'font-size:18px;']，数组第二项能够写任意css款式； 若你不想显示标题栏，能够 title: false；content - 内容 类型：String/DOM/Array，默认：''content可传入的值是灵便多变的，不仅能够传入一般的html内容，还能够指定DOM。 /* 信息框 */layer.open({ type:0, title:"零碎音讯", // content能够传入任意的文本或html content:"Hello"});/* 页面层 */layer.open({ type:1, title:"零碎音讯", // content能够传入任意的文本或html content:"<div style='height:100px;width:200px'>Hello</div>"});/* iframe */layer.open({ type:2, title:"零碎音讯", // content是一个URL，如果你不想让iframe呈现滚动条，你还能够content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no']}); /* tips层 */layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM});area - 宽高 ...

在我的客户页面，调整到 我的合同页面： <div>请去【<a style="color:green" class="toPage" data-type="toPage" >合同管理—我的合同</a>】页面提交审核！</div>js: var active = { toPage:function () { top.layui.index.openTabsPage("order/myOrdersList.jsp", '我的合同'); }} $("body").on('click','.toPage', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });打开另一页面(页签) 的关键代码： top.layui.index.openTabsPage("order/myOrdersList.jsp", '我的合同');

表单字段： <div class="layui-form-item layui-form-item-45" > <label class="layui-form-label">是否需要外勤</label> <div class="layui-input-block"> <input type="checkbox" name="isNeedOut" lay-filter="form-switch" lay-skin="switch" lay-text="是|否"> </div></div><div class="layui-form-item layui-form-item-45" > <label class="layui-form-label">是否收费</label> <div class="layui-input-block"> <input type="checkbox" name="isCost" lay-filter="form-switch" lay-skin="switch" lay-text="是|否"> </div></div><div class="layui-form-item layui-form-item-45" > <label class="layui-form-label">是否延期</label> <div class="layui-input-block"> <input type="checkbox" name="isDelay" lay-filter="form-switch" lay-skin="switch" lay-text="是|否"> </div></div>提交： var dialog = layer.open({ type: 2 ,title: '添加任务单' ,content: '../task/taskForm.jsp' ,maxmin: true ,area: layui.setter.area ,btn: ['确定', '取消'] ,btnAlign: 'c' ,yes: function(index, layero){ var iframeWindow = window['layui-layer-iframe'+ index] ,submit = layero.find('iframe').contents().find("#taskForm-submit"); iframeWindow.layui.form.on('submit(taskForm-submit)', function(data){ var field = data.field; field.taskSource = 1;//合同事项field.isUrgent = field.isUrgent?field.isUrgent:false; field.isNeedOut = field.isNeedOut?field.isNeedOut:false; field.isCost = field.isCost?field.isCost:false; field.isDelay = field.isDelay?field.isDelay:false; var rtn = admin.syncReq(ctx+"/task/task/add",field); if(rtn && rtn.code==0){ layer.msg('操作成功'); active.reload(); layer.close(index); }else{ layer.msg('操作失败'); } }); submit.trigger('click'); } }); layer.full(dialog)像这样： ...

showRec:function (obj) { window.formData = null; var dialog = layer.open({ type: 2 ,title: '订单支付' ,content: 'orderPayShow.jsp' ,maxmin: true ,area: layui.setter.area ,btn: ['关闭'] ,btnAlign: 'c' ,success:function(layero,index){ window.formData = obj.data; } }); layer.full(dialog)},orderPayShow.jsp: <%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ include file="/common/taglibs.jsp"%><%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%><!DOCTYPE html><html ><head> <meta charset="utf-8"> <title>订单支付</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all"></head><body><div class="layui-form" lay-filter="orderPayForm" id="orderPayForm" style="padding: 20px 10px 0 0;"> <script id="formTpl" type="text/html"> <div class="layui-form-item-45" > <label class="layui-form-label">公司ID</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.companyId}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">订单ID</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.orderId}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">金额</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.amount}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">付款类型;1-线上;2-转帐;3-汇款</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.payTypeStr}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">付款时间</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.payTimeStr}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">商户订单号</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.outTradeNo}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">交易流水号</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.transactionId}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">支付状态,1-未支付;2-支付成功;3-支付失败</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.payStatusStr}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">备注</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.remark}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">状态</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.statusStr}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">创建时间</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.createTimeStr}}</div> </div> </div> <div class="layui-form-item-45" > <label class="layui-form-label">修改时间</label> <div class="layui-input-block"> <div class="layui-form-mid">{{d.modifyTimeStr}}</div> </div> </div> </script> <div id="form_view"></div></div><script src="${ctxLayui}/layuiadmin/layui/layui.js"></script><script> layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'form','dict','laytpl','util'], function(){ var $ = layui.$ ,form = layui.form; var dict = layui.dict; var laytpl = layui.laytpl; var util = layui.util; var formData = window.parent.formData; formData.payTypeStr = formData.payType?dict.showName("payType",formData?formData.payType:1):''; formData.payTimeStr = formData.payTime?util.toDateString(formData.payTime,'yyyy-MM-dd'):''; formData.payStatusStr = formData.payStatus?dict.showName("payStatus",formData?formData.payStatus:1):''; formData.confirmTimeStr = formData.confirmTime?util.toDateString(formData.confirmTime,'yyyy-MM-dd'):''; formData.statusStr = formData.status?dict.showName("status",formData?formData.status:1):''; formData.createTimeStr = formData.createTime?util.toDateString(formData.createTime,'yyyy-MM-dd'):''; formData.modifyTimeStr = formData.modifyTime?util.toDateString(formData.modifyTime,'yyyy-MM-dd'):''; var data = formData; $.each(data,function(item){ if(!data[item]){ data[item] = ''; } }); var getTpl = formTpl.innerHTML,view = document.getElementById('form_view'); laytpl(getTpl).render(data, function(html){ view.innerHTML = html; }); })</script></body></html>其中：window.formData = obj.data; 将行记录赋值给window.formData 子页面获取：var formData = window.parent.formData;模板显示表单值： ...

项目介绍EasyAdmin是基于ThinkPHP6.0+Layui的快速开发的后台管理系统。 技术交流QQ群：763822524 加群请备注来源：如gitee、github、官网等。 站点地址官方网站：http://easyadmin.99php.cn文档地址：http://easyadmin.99php.cn/docs演示地址：http://easyadmin.99php.cn/admindemo（账号：admin，密码：123456。备注：只有查看信息的权限）代码仓库GitHub地址：https://github.com/zhongshaofa/easyadminGitee地址：https://gitee.com/zhongshaofa/easyadmin项目特性快速CURD命令行 一键生成控制器、模型、视图、JS文件支持关联查询、字段预设置等等基于auth的权限管理系统 通过注解方式来实现auth权限节点管理具备一键更新auth权限节点，无需手动输入管理完善的后端权限验证以及前面页面按钮显示、隐藏控制完善的菜单管理 分模块管理无限极菜单菜单编辑会提示权限节点完善的上传组件功能 本地存储阿里云OSS建议使用腾讯云COS七牛云OSS完善的前端组件功能 对layui的form表单重新封装，无需手动拼接数据请求简单好用的图片、文件上传组件简单好用的富文本编辑器ckeditor对弹出层进行再次封装，以极简的方式使用对table表格再次封装，在使用上更加舒服根据table的cols参数再次进行封装，提供接口实现image、switch、list等功能，再次基础上可以自己再次扩展根据table参数一键生成搜索表单，无需自己编写完善的后台操作日志 记录用户的详细操作信息按月份进行分表记录一键部署静态资源到OSS上 所有在public\static目录下的文件都可以一键部署一个配置项切换静态资源（oss/本地）上传文件记录管理后台路径自定义，防止别人找到对应的后台地址特别感谢以下项目排名不分先后 ThinkPHP：https://github.com/top-think/framework Layuimini：https://github.com/zhongshaofa/layuimini Annotations：https://github.com/doctrine/annotations Layui：https://github.com/sentsin/layui Jquery：https://github.com/jquery/jquery RequireJs：https://github.com/requirejs/requirejs WangEditor：https://github.com/wangfupeng1988/wangEditor Echarts：https://github.com/apache/incubator-echarts BUG反馈项目使用过程成，如遇到BUG，可通过以下途径进行反馈。 GitHub:https://github.com/zhongshaofa/easyadmin/issues Gitee:https://gitee.com/zhongshaofa/easyadmin QQ群:763822524 版权信息EasyAdmin遵循MIT开源协议发布，并提供免费使用。 QQ交流群763822524 加群请备注来源：如gitee、github、官网等。

一、 日期搜索： <div class="layui-inline layui-inline-31"> <label class="layui-form-label">创建时间</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="createTime-laydate-range" autocomplete="off" placeholder=" - "> <input type="hidden" name="createTimeStart"> <input type="hidden" name="createTimeEnd"> </div></div>若在当前页的搜索： admin.renderDateForSearch("createTime")若是呼出页面的搜索： var search_field = { };top.layui.admin.popupRight({ id: 'LAY_workTaskLogPopupLayer' ,area: '350px' ,success: function(layero,index){ top.layui.view(this.id).render('task/workTaskLogSearch',$.extend(search_field,{ logTypeArr:logTypeArr, statusArr:statusArr,})).done( function () { top.layui.form.render(); admin.renderDateForSearch("createTime",search_field); } ); } });自定义封装方法： admin.renderDateForSearch： /** * 用于日期范围的搜索 * cjianquan 2020/3/19 * @param name 搜索的表单值名称，即对应后台Bean的属性 * @param search_field 搜索字段 * @param type 日期类型 */admin.renderDateForSearch = function(name,search_field,type){ var val = ''; type = type?type:'date'; if(search_field && search_field[name+"Start"] && search_field[name+"End"]){ val+=search_field[name+"Start"]+" ~ "+search_field[name+"End"]; } var layui_laydate = search_field?top.layui.laydate:layui.laydate; var layui$ = search_field?top.layui.$:layui.$; layui_laydate.render({ elem: '#'+name+'-laydate-range' , type:type, trigger: 'click', range: '~', value:val, done: function(value, date, endDate){ if(!value){ layui$(".layui-form-item [name="+name+"Start]").val(null); layui$(".layui-form-item [name="+name+"End]").val(null); if(search_field){ search_field[name+"Start"] = ''; search_field[name+"End"] = ''; } return; } var dateStr1= value.split(" ~ ")[0] var dateStr2= value.split(" ~ ")[1] layui$(".layui-form-item [name="+name+"Start]").val(dateStr1); layui$(".layui-form-item [name="+name+"End]").val(dateStr2); if(search_field){ search_field[name+"Start"] = dateStr1; search_field[name+"End"] = dateStr2; } } });}二、单日期选择： ...

三个按钮：,btn: ['拨打','挂断','关闭'] '拨打','挂断' 这两个是不同时出现的。 var dialog = layer.open({ type: 2 ,title: '拨打电话' ,content: 'customerPhone.jsp' ,maxmin: true ,area: layui.setter.area_percent ,offset:'t' ,btn: ['拨打','挂断','关闭'] ,btnAlign: 'c' ,success:function(layero,index){ window.formData = rec; window.formData = $.extend(rec,{ seatStatus:$("#seatStatus").val(), callType:$("#callType").val(), }); $("a.layui-layer-btn1").css("background-color","#FF5722"); setTimeout(function () { callPhone(rec.id,rec.mobile); $("a.layui-layer-btn0").hide(); $("a.layui-layer-btn1").show(); },500) } ,yes:function (index, layero) { callPhone(rec.id,rec.mobile); $("a.layui-layer-btn0").hide(); $("a.layui-layer-btn1").show(); return false; } ,btn2:function (index, layero) { hangUpPhone(); $("a.layui-layer-btn0").show(); $("a.layui-layer-btn1").hide(); return false; } ,btn3:function (index, layero) { }});控制的代码就是： ...

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ include file="/common/taglibs.jsp"%><%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>管理系统</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/admin.css" media="all"></head><body class="layui-layout-body"><div id="LAY_app"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <!-- 头部区域 --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item layadmin-flexible" lay-unselect> <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩"> <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;" layadmin-event="refresh" title="刷新"> <i class="layui-icon layui-icon-refresh-3"></i> </a> </li> <%--<li class="layui-nav-item layui-hide-xs" lay-unselect> <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords="> </li>--%> </ul> <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right"> <%--<li class="layui-nav-item" lay-unselect> <a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心"> <i class="layui-icon layui-icon-notice"></i> <!-- 如果有新消息，则显示小圆点 --> <span class="layui-badge-dot"></span> </a> </li>--%> <%--<li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="theme"> <i class="layui-icon layui-icon-theme"></i> </a> </li>--%> <%--<li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="note"> <i class="layui-icon layui-icon-note"></i> </a> </li>--%> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="fullscreen"> <i class="layui-icon layui-icon-screen-full"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"> <cite> <shiro:principal property="name"/> </cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="system/userInfoForm.jsp#/self=1">基本资料</a></dd> <%--<dd><a lay-href="set/user/password.html">修改密码</a></dd>--%> <hr> <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd> </dl> </li> <li class="layui-nav-item " lay-unselect> <a href="javascript:;"> <cite data-type="openCall" class="call_seat">坐席</cite> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" > <%--<i class="layui-icon layui-icon-more-vertical"></i>--%> </a> </li> <%--<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect> <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a> </li>--%> </ul> </div> <!-- 侧边菜单 --> <div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <div class="layui-logo" lay-href="home/console.html"> <span>后台管理</span> </div> <!-- 建议改变真实接口地址时保留lay-url中的?v={{ layui.admin.v }} --> <script type="text/html" template lay-done="layui.element.render('nav', 'layadmin-system-side-menu');" id="TPL_layout"> <div lay-templateid="TPL_layout"> <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu"> {{# layui.each(d.data, function(index,item){ }} <li class="layui-nav-item {{ item.spread ? item.children && item.children.length > 0 ? 'layui-nav-itemed' : 'layui-this': '' }}" myDir = "1"> {{# if(item.url){ }} <a lay-href="{{ item.url }}" lay-tips="{{ item.name }}" lay-direction="2"> {{# }else{ }} <a href="javascript:;" lay-tips="{{ item.name }}" lay-direction="2"> {{# } }} {{# if(item.icon){ }} <i class="layui-icon {{ item.icon }}"></i> {{# } }} <cite>{{ item.name }}</cite> </a> {{# var itemListFun = function(children, myDir){ myDir = myDir || 2; if( children && children.length > 0){ }} <dl class="layui-nav-child"> {{# layui.each(children, function(index2, item2){ }} <dd data-name="{{ item2.code || '' }}" class="{{ item2.spread ? (item2.children && item2.children.length > 0 ? 'layui-nav-itemed' : 'layui-this' ) : ''}}" myDir="{{ myDir }}"> {{# if(item2.icon){ }} <i class="layui-icon {{ item.icon }}"></i> {{# } }} {{# if(item2.url){ }} <a lay-href="{{ item2.url }}">{{ item2.name }}</a> {{# }else{ }} <a href="javascript:;">{{ item2.name }}</a> {{# } }} {{# itemListFun(item2.children,myDir+1);}} </dd> {{# }) }} </dl> {{# } }} {{# }; itemListFun(item.children); }} </li> {{# }) }} </ul> </div> </script> </ul> </div> </div> <!-- 页面标签 --> <div class="layadmin-pagetabs" id="LAY_app_tabs"> <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-down"> <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav"> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"></a> <dl class="layui-nav-child layui-anim-fadein"> <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd> <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd> <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd> </dl> </li> </ul> </div> <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs"> <ul class="layui-tab-title" id="LAY_app_tabsheader"> <li lay-id="home/console.jsp" lay-attr="home/console.jsp" class="layui-this"><i class="layui-icon layui-icon-home"></i></li> </ul> </div> </div> <!-- 主体内容 --> <div class="layui-body" id="LAY_app_body"> <div class="layadmin-tabsbody-item layui-show"> <iframe src="home/console.jsp" frameborder="0" class="layadmin-iframe"></iframe> </div> </div> <!-- 辅助元素，一般用于移动设备下遮罩 --> <div class="layadmin-body-shade" layadmin-event="shade"></div> </div></div><script src="${ctxLayui}/layuiadmin/layui/layui.js"></script><script> layui.config({ base: '${ctxLayui}/layuiadmin/' //静态资源所在路径 ,version:new Date().getTime() }).extend({ index: 'lib/index' //主入口模块 }).use(['index','laytpl','common','form','dict','laydate'],function () { var $ = layui.$; var admin = layui.admin; var laytpl = layui.laytpl; var element = layui.element; var form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var menuTpl = top.layui.view('TPL_layout'); menuTpl.container.attr('lay-url', ctx+'/business/businessUser/getMenuList?v='+layui.admin.v);//可更改url menuTpl.refresh(); });</script></body></html>接口：business/businessUser/getMenuList 的返回结构为：BusinessMenuPo ...

<div class="layui-card-body" style="padding:0;"> <div class="layui-tab layui-tab-card" style="margin:0" lay-filter="myTaskTabs"> <ul class="layui-tab-title"> <li class="layui-this">待处理</li> <li>我创建</li> <li>已完成</li> <li>全部</li> </ul> <div class="layui-tab-content" style="padding:0px;"> <div class="layui-tab-item layui-show"> <iframe src="myTaskTodoList.jsp" style="width:100%;height:94%;" frameborder="0" name="iframe0" ></iframe> </div> <div class="layui-tab-item"> <iframe src="myCreateTaskList.jsp" style="width:100%;height:94%;" frameborder="0" name="iframe1" ></iframe> </div> <div class="layui-tab-item"> <iframe src="myTaskDoneList.jsp" style="width:100%;height:94%;" frameborder="0" name="iframe2" ></iframe> </div> <div class="layui-tab-item"> <iframe src="myTaskList.jsp" style="width:100%;height:94%;" frameborder="0" name="iframe3" ></iframe> </div> </div> </div></div><script> layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend({ index: 'lib/index' }).use(['index', 'table','dict','laydate','util','element'], function(){ var $ = layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util; var element = layui.element; element.on('tab(myTaskTabs)',function (data) { var index = data.index; var urlArr = [ 'myTaskTodoList.jsp', 'myCreateTaskList.jsp', 'myTaskDoneList.jsp', 'myTaskList.jsp', ]; layui.$("iframe[name='iframe" + index + "']").attr("src",urlArr[index]); }) });</script>即动态修改 iframe 的src ,页面会重新加载。 ...