layui是一款优秀的模块化前端框架。利用layui弹出层做编辑页面
先上效果图
基本准备,引入layui的layui.css,layui.js文件
<link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" media="all"> <script src="../../../Publics/others/layui/layui.js"></script>
Js方法
/** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @param {} title 标题 不显示为false * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度 * @param {} path 弹出页面路径 * @param {} sucFunName 执行保存操作后再弹出页面中的保存方法名称 * @param {} callBack 执行保存操作之后的其他操作 * @returns {} */ function openDetial(title, area, path, sucFunName, callBack) { layer.open({ type: 2, title: title, //不显示标题栏 closeBtn: 2, area: area, shade: 0.8, id: (new Date()).valueOf(), //设定一个id,防止重复弹出 时间戳1280977330748 btn: ['保存', '取消'], btnAlign: 'r', moveType: 1, //拖拽模式,0或者1 content: path, yes: function (index, layero) { var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0'); alert("-----"); try { var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow || btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow; var func = new Function('_ifr', "return _ifr." + sucFunName + "();"); var flg = func(_ifr); if (flg == false) { return false; } else { if (callBack != null) callBack(); window.location.reload(); } } catch (ex) { } }, btn2: function (index, layero) { } }); } //
以下是测试页面 测试页面中具备保存方法ApplicationSave()
<!--// ======================================================================== // Author : Jp // Email : [email protected]/[email protected] // Create Time : 2018-4-22 15:53:38 // Update Time : 2018-4-22 15:53:43 // ========================================================================= // CLR Version : 4.0.30319.42000 // Class Version : v1.0.0.0 // Class Description : 编辑页面 // Computer Name : Jp // ========================================================================= // Copyright ©JiPanwu 2017 . All rights reserved. // ========================================================================== --> <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width =device-width, initial-scale=1"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>JpAutoFramework</title> <meta content="victor" name="author"/> <script type="text/javascript"> function ApplicationSave() { //具体保存操作 //需要返回值,保存成功,返回true,保存失败返回false } </script> </head > <body onload="load()" style="margin: auto"> <form> <table id="data" class="editorTable" style="margin: auto; margin-top: 50px; width: 80%;"> <tr style="display: none;"> <th> 编号 </th> <td> <input type="text" readonly="readonly" id="ID" /></td> </tr> <tr> <th> 项目名称 </th> <td> <input type="text" id="Names" /></td> </tr> <tr> <th> 金额 </th> <td> <input type="text" id="PRICE" /></td> </tr> <tr> <th> 账目类型 </th> <td> <select type="text" id="ISOUT"> <option value="0">支出</option> <option value="1">收入</option> <option value="2">信用卡消费</option> <option value="3">信用卡还款</option> </select> </td> </tr> <tr> <th> 日期 </th> <td> <input type="text" id="Dates" /></td> </tr> <tr> <th> 描述 </th> <td> <textarea rows="10" cols="38" id="Remark"></textarea> </td> </tr> </table> </form> </body > </html >
调用 如下参数中的ApplicationSave和编辑页面的方法名一致
openDetial("列表维护", ['600px', '550px'], "./editor.html", "ApplicationSave", function() {alert("执行完了");});
有兴趣的小伙伴,可以试试
//具体保存操作