演示界面:
下面是代碼片斷
JSP頁面javascript
<div class="layui-form-item"> <label class="layui-form-label">收件人</label> <div class="layui-input-block"> <input type="text" name="inUsers" id="addUser" placeholder="點擊選擇收件人" lay-verify="required" class="layui-input" autocomplete="off"/> <input type="hidden" name="uids" id="uids"/> </div> </div>
父級頁面JS代碼段:html
$("#addUser").click(function(){ layer.open({ type: 2, title:"選擇收件人", id:"link", area: ['20%', '80%'], fixed: false, //不固定 maxmin: true, content: '../email/goUserList', btn: ["肯定", '關閉'], success: function(layero, index) { }, // 肯定的操做 btn1: function(index,layero) { //這一行是關鍵,獲取的是子頁面的內容,因此能夠在子頁面將數據綁定在隱藏區域,從而在這個地方獲取 var obj = layero.find("iframe")[0].contentWindow; //獲取子窗體對象 var list = obj.document.querySelectorAll('input[type=checkbox]'); var ids_str=""; var uname_str=""; for (var i = 0; i < list.length; ++i) { if(list[i].checked==true && list[i].name =='ids'){ ids_str += list[i].value +','; uname_str += list[i].title +','; } } $("#uids").val(ids_str); $("#addUser").val(uname_str); layer.close(index); }, cancel: function(index, layero) { // 取消的操做 } }); });
子級頁面代碼段內容java
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="layui-table" th:each="branch:${branchUserList}"> <tr class="bgtr"> <th colspan="2"> <input lay-skin="primary" type="checkbox" name="branchId" th:class="checkId" th:classappend="y_+${branch.id}" lay-filter="y" th:value="${branch.id}" th:title="${branch.levelName}"/> </th> </tr> <tr> <td colspan="2" style="padding:10px;"> <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="role_table" th:each="user:${branch.userList}"> <tr> <th colspan="2"> <input lay-skin="primary" type="checkbox" name="ids" th:class="checkId" th:classappend="y_+${branch.id} + ' e_'+${user.id}" lay-filter="e" th:value="${user.id}" th:title="${user.tname}"/> </th> </tr> </table> <div class="sp10"></div> </td> </tr> </table>
子級頁面JS代碼段:app
var $ = layui.$, form = layui.form; //一級選中 form.on('checkbox(y)', function(data){ var id=data.value; $('.y_'+id).each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); //二級 form.on('checkbox(e)', function(data){ var id=data.value; $('.e_'+id).each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); })