第三种 url方式弹窗 · EasyWeb开发文档

## 10.3.第三种 url方式弹窗 url方式弹窗就是使用url参数将弹窗页面独立出来，url参数admin.open特有的。弹窗页面，userForm.html： ```html  <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form"> <input name="userId" type="hidden"/> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input name="nickName" class="layui-input" placeholder="请输入用户名" lay-verType="tips" lay-verify="required" required/> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked/> <input type="radio" name="sex" value="女" title="女"/> </div> </div> <div class="layui-form-item text-right"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button> </div> </form> <script> layui.use(['layer', 'form', 'admin'], function () { var $ = layui.jquery, layer = layui.layer, form = layui.form, admin = layui.admin; var mUser = admin.getLayerData('#modelUserForm').user; // 列表页面传递的数据，#modelUserForm这个只要写弹窗内任意一个元素的id即可 form.val('modelUserForm', mUser); // 回显数据 // 表单提交事件 form.on('submit(modelSubmitUser)', function (data) { layer.load(2); var url = mUser ? '/updateUser' : '/addUser'; $.post(url, data.field, function (res) { layer.closeAll('loading'); if (res.code == 200) { layer.msg(res.msg, {icon: 1}); admin.putLayerData('formOk', true, '#modelUserForm'); // 设置操作成功的标识，#modelUserForm这个只要写弹窗内任意一个元素的id即可 admin.closeDialog('#modelUserForm'); // 关闭页面层弹窗 } else { layer.msg(res.msg, {icon: 2}); } }, 'json'); return false; }); }); </script> ``` 表格页面，list.html： ```html <button id="btnAddUser" class="layui-btn">添加</button> <table id="tableUser" lay-filter="tableUser"></table>  <script type="text/html" id="tableBarUser"> <a class="layui-btn" lay-event="edit">修改</a> <a class="layui-btn" lay-event="del">删除</a> </script>  <script> layui.use(['layer', table', 'admin'], function () { var $ = layui.jquery, layer = layui.layer, table = layui.table, admin = layui.admin; // 渲染表格 var insTb = table.render({ elem: '#tableUser', url: '../../json/user.json', cols: [[ {field: 'nickName', title: '用户名'}, {field: 'sex', title: '性别'}, {toolbar: '#tableBarUser', title: '操作'} ]] }); // 添加 $('#btnAddUser').click(function () { showEditModel(); }); // 工具条点击事件 table.on('tool(tableUser)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'edit') { // 修改 showEditModel(data); } else if (layEvent === 'del') { // 删除 layer.msg('点击了删除', {icon: 2}); } }); // 显示表单弹窗 function showEditModel(mUser) { var layIndex = admin.open({ title: (mUser ? '修改' : '添加') + '用户', url: 'userForm.html', data: { user: mUser }, // 传递数据到表单页面 end: function () { if (admin.getLayerData(layIndex, 'formOk')) { // 判断表单操作成功标识 insTb.reload(); // 成功刷新表格 } }, success: function (layero, dIndex) { // 弹窗超出范围不出现滚动条 $(layero).children('.layui-layer-content').css('overflow', 'visible'); } }); } }); </script> ``` 使用`url`参数指定弹窗的页面地址，url这个参数是admin.open新增的，这样做就会把表单页面的html使用ajax加载到弹窗中，而不是iframe嵌入，这样表单里面的下拉框、日期等组件就可以超出弹窗的范围，不会导致弹窗出现滚动条。 >[danger] 注意：表单页面是html片段，表单页面和表格页面不要出现重复的id，因为最终是在一个页面上 <br/>