LayUI彈出框選擇用戶返回用戶值

演示界面:

下面是代碼片斷
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');
	});

})
相關文章
相關標籤/搜索