背景： 在使用Django做列表页时，需要用到增删改查，在新增的时候用到了layui.open的弹出层。将新增页面当做一个iframe嵌入到列表页，使用layui.open的btn制作按钮，并且实现提交表单的功能
实现： 先用HTML话列表页和新增页面的图表，列表页
1 {% extends 'lebbay/basePage.html' %} 2 3 4 <head> 5 <meta charset="UTF-8"> 6 </head> 7 <body> 8 {% block content %} 9 <span class="layui-breadcrumb" lay-separator="/"> 10 <a href="{% url 'mainPage' %}"><u style="color: #0000FF; font-size: 20px">主页</u></a> 11 <a href="{% url 'othersPage' %}"><u style="color: #0000FF; font-size: 20px">Others</u></a> 12 </span> 13 14 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> 15 <legend>动态添加列表页面</legend> 16 </fieldset> 17 {#功能区： 搜索、新增#} 18 {#列表内容：删除、修改 先完成列表内容部分，#} 19 {# 点击新增按钮，弹出一个弹窗#} 20 {# 填写信息后，提交给后端，后端写入数据库，并且返回给前端#} 21 {# 前端每次刷新页面都会请求到数据库中的数据#} 22 <blockquote class="layui-elem-quote"> 23 <div class="layui-row"> 24 <form class="layui-form layui-col-md12 x-so" id="complain_search"> 25 <div class="layui-col-md3"> 26 ID: 27 <div class="layui-input-inline"> 28 <input type="text" name="serviceCode" id="serviceCode" 29 placeholder="请输入ID" autocomplete="off" class="layui-input"> 30 </div> 31 </div> 32 <div class="layui-col-md3"> 33 环境: 34 <div class="layui-input-inline"> 35 <select name="env" id="evn"> 36 {# <option value="">---请选择---</option>#} 37 <option value="0">开发环境</option> 38 <option value="1">P环境</option> 39 <option value="2">测试环境</option> 40 </select> 41 </div> 42 </div> 43 <div class="layui-col-md3"> 44 服务端: 45 <div class="layui-input-inline"> 46 <select name="serverType" id="serverType"> 47 {# <option value="">---请选择---</option>#} 48 <option value="0">PC端</option> 49 <option value="1">M端</option> 50 <option value="2">APP端</option> 51 </select> 52 </div> 53 </div> 54 <div class="layui-col-md3"> 55 国家/地区: 56 <div class="layui-input-inline"> 57 <select name="countryArea" id="countryArea"> 58 {# <option value="">---请选择---</option>#} 59 <option value="0">US</option> 60 <option value="1">CA</option> 61 </select> 62 </div> 63 <button id="search" class="layui-btn layui-btn-normal" lay-submit 64 lay-filter="linkSearch"> 65 <i class="layui-icon"></i> 66 </button> 67 </div> 68 69 </form> 70 </div> 71 <table class="layui-hide" id="linkTable" lay-filter="linkList"></table> 72 </blockquote> 73 74 <script type="text/html" id="add_event"> 75 <div class="layui-btn-container"> 76 <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add_link"><i class="layui-icon">�添加</i> 77 </button> 78 </div> 79 </script> 80 81 <script type="text/html" id="optsBar"> 82 <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> 83 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> 84 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 85 </script> 86 <script type="text/javascript"> 87 layui.use(['table', 'layer', 'form', 'laypage'], function () { 88 var table = layui.table, 89 layer = layui.layer, 90 form = layui.form, 91 laypage = layui.laypage; 92 93 table.render({ 94 id: "linkReload" //无所谓 95 , elem: '#linkTable' //需要渲染的元素，表格元素 96 , url: '/medicaladmin/complain/list' //渲染的数据源，json格式 97 , page: true // 开启分页 98 , method: 'post' 99 , toolbar: '#add_event' //新增设置为toolbar 100 , limit: 10 101 , response: { 102 statusName: 'code', 103 msgName: 'message', 104 statusCode: 200, 105 dataName: 'beans', 106 countName: 'page', 107 } 108 , request: { 109 pageName: 'page', 110 limitName: 'size' 111 } 112 , cols: [ 113 [ 114 {checkbox: true}//开启多选框 115 , {field: 'id', 150, title: 'ID'} 116 , { 117 field: 'serviceCode', 150, title: '环境', templet: function (d) { 118 if (d.compType == 0) { 119 return '<span style="color: #D03948;">正式环境</span>'; 120 } else if (d.compType == 1) { 121 return '<span style="color: #18A4D0;">P环境</span>'; 122 } else if (d.compType == 2) { 123 return '<span style="color: #5CD03F;">测试环境</span>'; 124 } 125 } 126 } 127 , {field: 'compType', 150, title: '服务端'} 128 , {field: 'compOrder', 150, title: '国家/地区'} 129 , { 130 field: 'compReason', 150, title: 'linkUrl', templet: function (d) { 131 return '<a>' + d + '</a>'; 132 } 133 } 134 , {fixed: 'right', title: '操作', toolbar: '#optsBar'} 135 ] 136 ] 137 , limits: [5, 10, 20, 50] 138 }); 139 140 table.on('toolbar(linkList)', function (obj) { 141 var checkStatus = table.checkStatus(obj.config.id), 142 data = checkStatus.data; 143 data = eval("(" + JSON.stringify(data) + ")"); 144 switch (obj.event) { 145 case 'add_link': // lay-event自定义的新增按钮toolbar事件 146 layer.open({ 147 type: 2, 148 title: "新增地址链接操作", 149 area: ['20%', '40%'], 150 fix: false, 151 maxmin: true, 152 shadeClose: true, 153 shade: 0.4, 154 {#skin: 'layui-layer-normal',#} 155 skin: 'layui-layer-rim', 156 content: ["{% url 'addLink' %}", "no"], 157 btn: ['提交', '取消'], 158 yes: function (index, layero) { 159 var json_data = $(layero).find("iframe")[0].contentWindow.callbackdata(); 160 $.ajax({ 161 url: "{% url 'addLinkApi' %}", 162 type: "post", 163 datatype: "json", 164 data: json_data, 165 {#data: $().serialize(),#} 166 {#data: JSON.stringify({#} 167 {# "env": $("#env").val(),#} 168 {# "server": $("#server").val(),#} 169 {# "area": $("#area").val(),#} 170 {# "link": $("#links").val()#} 171 {# }),#} 172 success: function (data) { 173 console.log($("#server").val()); 174 console.log(data); 175 layer.msg(data.data); 176 } 177 }); 178 layer.close(index); 179 } 180 {#content: ["/medicaladmin/complain/complainAdd", "no"],#} 181 }); 182 {#var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引#} 183 {#parent.layer.close(index); //再执行关闭#} 184 break; 185 } 186 }); 187 table.on('tool(linkList)', function (obj) { 188 var data = obj.data; 189 json = JSON.stringify(data); 190 switch (obj.event) { 191 case 'detail': 192 console.log("投诉详情"); 193 var index = layer.open({ 194 type: 2, 195 title: "投诉详情页面", 196 area: ['30%', '60%'], 197 fix: false, 198 maxmin: true, 199 shadeClose: true, 200 shade: 0.4, 201 skin: 'layui-layer-rim', 202 content: ["/medicaladmin/complain/complainRead", "no"], 203 }); 204 break; 205 case 'edit': 206 var index = layer.open({ 207 type: 2, 208 title: "编辑投诉页面", 209 area: ['30%', '60%'], 210 fix: false, 211 maxmin: true, 212 shadeClose: true, 213 shade: 0.4, 214 skin: 'layui-layer-rim', 215 content: ["/medicaladmin/complain/complainEdit", "no"], 216 }); 217 break; 218 case 'del': 219 var delIndex = layer.confirm('真的删除id为' + data.id + "的信息吗?", function (delIndex) { 220 $.ajax({ 221 url: '/medicaladmin/complain/delete/' + data.id, 222 type: "post", 223 success: function (suc) { 224 if (suc.code == 200) { 225 obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 226 layer.close(delIndex); 227 console.log(delIndex); 228 layer.msg("删除成功", { 229 icon: 1 230 }); 231 } else { 232 layer.msg("删除失败", { 233 icon: 5 234 }); 235 } 236 } 237 }); 238 layer.close(delIndex); 239 }); 240 break; 241 } 242 }); 243 form.render(); 244 form.on('submit(linkSearch)', function (data) { 245 // 查询 246 console.log(data) 247 var formData = data.field; 248 console.debug(formData); 249 var serviceCode = formData.serviceCode, 250 compOrder = formData.compOrder, 251 compType = formData.compType, 252 complainState = formData.complainState; 253 254 table.reload('provinceReload', { 255 page: { 256 curr: 1 257 }, 258 where: { 259 serviceCode: serviceCode, 260 compOrder: compOrder, 261 compType: compType, 262 complainState: complainState 263 }, 264 method: 'post', 265 contentType: "application/json;charset=utf-8", 266 url: '/medicaladmin/complain/queryComplainByCondition', 267 }); 268 return false; 269 }); 270 }); 271 </script> 272 273 {% endblock %} 274 </body>
新增页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>新增链接地址</title> 6 <script rel="stylesheet" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 7 <link rel="stylesheet" href="../../../static/layui/css/layui.css"> 8 <link rel="stylesheet" href="../../../static/mainPage/css/custom.css"> 9 <script rel="stylesheet" src="../../../static/layui/layui.js"></script></head> 10 <body> 11 <div style="100%; text-align-all:center"> 12 <form class="layui-form layui-form-pane" action="" method="post"> 13 <div class="layui-form-item"> 14 <label class="layui-form-label">环境</label> 15 <div class="layui-input-inline"> 16 <select name="env" id="env"> 17 <option value="develop">开发环境</option> 18 <option value="p">P环境</option> 19 <option value="test" selected>测试环境</option> 20 </select> 21 </div> 22 </div> 23 <div class="layui-form-item"> 24 <label class="layui-form-label">服务端</label> 25 <div class="layui-input-inline"> 26 <select name="server" id="server"> 27 <option value="PC">PC端</option> 28 <option value="M">M端</option> 29 <option value="APP">APP端</option> 30 </select> 31 </div> 32 </div> 33 <div class="layui-form-item"> 34 <label class="layui-form-label">国家/地区</label> 35 <div class="layui-input-inline"> 36 <select name="area" id="area"> 37 <option value="US">US</option> 38 <option value="CA">CA</option> 39 </select> 40 </div> 41 </div> 42 <div class="layui-form-item"> 43 <label class="layui-form-label">链接</label> 44 <div class="layui-input-inline"> 45 <input type="text" class="layui-input" placeholder="输入链接" id="links"> 46 </div> 47 </div> 48 <div class="layui-form-item"> 49 <input type="button" class="layui-btn layui-btn-normal" value="立即提交" id="submit" style="margin-left: 40%"> 50 </div> 51 </form> 52 </div> 53 54 <script> 55 layui.use(['form'],function (){ 56 var form = layui.form, 57 layer = layui.layer 58 59 $("#submit").click(function () { 60 // 页面执行的时候，用按钮提交， 这里使用的iframe，不需要此处的submit 61 $.ajax({ 62 url: "{% url 'addLinkApi' %}", 63 type: "post", 64 datatype: "json", 65 {#data: $().serialize(),#} 66 data: JSON.stringify({ 67 "env":$("#env").val(), 68 "server":$("#server").val(), 69 "area":$("#area").val(), 70 "link":$("#links").val() 71 }), 72 success: function (data){ 73 console.log(data) 74 layer.msg(data.data) 75 } 76 }); 77 }); 78 }); 79 var callbackdata = function () { 80 // 提供数据，给主页面 81 var json_data = JSON.stringify({ 82 "env":$("#env").val(), 83 "server":$("#server").val(), 84 "area":$("#area").val(), 85 "link":$("#links").val() 86 }) 87 return json_data 88 } 89 </script> 90 </body> 91 </html>
在这一步骤中，比较核心的操作是获取iframe中的数据，请求iframe中的callbackdata()
直接从主页面无法获取iframe中的数据
var json_data = $(layero).find("iframe")[0].contentWindow.callbackdata();
提供数据
var callbackdata = function () { // 提供数据，给主页面 var json_data = JSON.stringify({ "env":$("#env").val(), "server":$("#server").val(), "area":$("#area").val(), "link":$("#links").val() }) return json_data }