<%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <!DOCTYPE html> <html lang="en"> <head> <link href="${assetsctx }js/fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> <script src="${assetsctx }js/fileinput/js/fileinput.min.js"></script> <script src="${assetsctx }js/fileinput/js/locales/zh.js"></script> <script src="${assetsctx }/vendor/bootstrap/bootstrap-3.37.mim.js"></script> <script type="text/javascript" src="${assetsctx }js/layer/layer.js"></script> <script type="text/javascript" src="${assetsctx }js/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="${assetsctx }js/ueditor/ueditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="${assetsctx }js/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript" src="${assetsctx }js/My97DatePicker/WdatePicker.js"></script> </head> <body> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <form id="defaultform" class="form-horizontal" onsubmit="return checkForm()" action="${ctx }/mission/saveorupdate" method="post" style="display:inline;"> <div id="myTabContent" class="tab-content "> <!-- 基本信息 --> <div class="tab-pane fade in active " id="home" > <input type="hidden" id="shpstoreids" name="shpstoreids" value="${mission.shpstoreids}“><!-- 隱藏的商戶框 --> <input type="hidden" id="shopCount" name="shopCount"><!-- 隱藏的商戶數量框 --> <br> <div class="form-group"> <label class="control-label col-sm-2"></label> <div class="controls col-sm-4"> <input type="radio" name="verificationType" id="verificationType2" value="SHOP" > 服務商 <button class="btn btn-primary" type="button" onclick="x_admin_show('請選擇關聯服務商','50%','70%')"> 關聯服務商 </button> <span id="shopCountSpan">已選擇 <c:choose> <c:when test="${empty mission.shpstoreids}"><!-- 如果 --> 0 </c:when> <c:otherwise> <!-- 否則 --> <c:set value="${ fn:split(mission.shpstoreids, ',') }" var="str2" />${fn:length(str2) } </c:otherwise> </c:choose> 家服務商</span> </div> </div> <div class="form-group"> <div class="col-sm-1"></div> <div class="col-sm-4"> <a href="${ctx }/mission/list" class="btn btn-info"><span class="fa fa-arrow-left fa-fw"></span> 返回</a> <button class="btn btn-primary" type="submit" onclick=" return checkSubmit();"> 保存 </button> </div> </div> </div> </div> </form> </div> </div> </div> </div> <%-- 彈出層函數 --%> <script src="${assetsctx }vendor/layer/layer.js"></script> <script src="${assetsctx }vendor/jquery/jquery.js"></script> <script type="text/javascript"> $(function () { //加載彈出層 layui.use(['form','element'], function() { layer = layui.layer; element = layui.element; }); }); <%--彈出層 title 標題 id 需要操作的數據id w 彈出層寬度(缺省調默認值) h 彈出層高度(缺省調默認值) --%> function x_admin_show(title,w,h){ var verificationType = $('input:radio[name="verificationType"]:checked').val(); if (verificationType !== 'SHOP') { alert("請選擇服務商"); return; } var shpstoreids = "${mission.shpstoreids }"; if (!shpstoreids) { shpstoreids = $("#shpstoreids").val(); url = "${ctx }/mission/rich?shpstoreids=" + shpstoreids; } else { url = "${ctx }/mission/rich?shpstoreids=${mission.shpstoreids }"; }//修改數據的時候用url傳參給子頁面顯示已勾選的內容提供數據支持 if (title == null || title === '') { title=false; } if (w == null || w === '') { w=($(window).width()*0.5); } if (h == null || h === '') { h=($(window).height() - 100); } layer.open({ type: 2, area: [w, h], fix: false, //不固定 maxmin: true, shadeClose: true, shade:0.4, closeBtn:1, title: title, content:'${ctx }/mission/rich',//指向彈出層子頁面的鏈接 // scrollbar: false ,//屏蔽瀏覽器滾動條 btn: ['確定','關閉'], // shade: 0.4, //遮罩透明度 yes: function (index) { //獲取選擇的row,並加載到頁面 var row = window["layui-layer-iframe" + index].callbackdata(); var shopsIds = row.shopsIds; var shopsCount = row.shopsCount;//商戶數量 //console.log(row); $("#shpstoreids").val(shopsIds); if (shopsCount != null && shopsCount !== '') { $("#shopsCount").val(shopsCount); var str=''; str+='已選擇'+shopsCount; str+='家服務商'; $("#shopCountSpan").text(str); } layer.close(index) }, cancel : function(){ // 你點擊右上角 X 取消后要做什么 } }); } </script> <script type="text/javascript"> function checkSubmit(){ var Ids = document.getElementById("shpstoreids").value; if(Ids == null || Ids.length<=0){ alert("請關聯服務商"); return false; } return true; } </script> </body> </html> 父頁面 ======================================================================================================================= 子頁面 <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <!DOCTYPE html> <html lang="en"> <head> <%@ include file="/common/head.jsp"%> <link rel="stylesheet" href="${assetsctx }/vendor/jquery-richUI/css/jquery.richUI.min.css" /> <body> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <div class="row" > <input type="hidden" id="shopListHidden"/> <input type="hidden" id="shopCount" /> <div class="col-sm-12" id="allshop"> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> //layui彈出層回調 var callbackdata = function () { douhaoAppendStr(); var data = { shopsIds: arr1.join(","), shopsCount : $("#shopCount").val(), }; return data; }; //頁面加載執行 $(function() { box(); }); function box(){ $.ajax({ url : "${ctx}/mission/getallshops",//ajax獲取的是彈出層子頁面里需要加載的數據 type : "get", async : false, dataType : "json", success : function(jsonData){ $("#allShop").empty(); var shoplist = jsonData; var all=$("#allshop"); for (var j = 0; j < shoplist.length; j++) { if (shoplist[j].districtNo !== dcode.toString()){ var shopId = shoplist[j].id; var shopName = shoplist[j].merName; var children=document.createElement("input"); children.setAttribute("type","checkbox"); children.setAttribute("id",shopId); children.setAttribute("name",shopName); children.setAttribute("value",shopId); children.setAttribute("style","padding-top:2px;height:1.78em;font:5px arial;"); all.append(children); all.append(shopName); }} }, error : function(){ // 服務器連接失敗 alert("服務器連接失敗"); } }); huixian(); } function huixian() { var val=$("#shopListHidden").val(); console.log(1111); console.log(val); var shopArr = val.split(',');//轉換數組 for (var i = 0; i < shopArr.length; i++) { $("#"+shopArr[i]).attr("checked",'true'); } } //拼接放到隱藏框里,shopId function douhaoAppendStr() { arr1 = []; $('input[type="checkbox"]:checked').each(function(){ arr1.push($(this).val()); }); $("#shopsListHidden").val(arr1.join(",")); var shopsCount = arr1.length; $("#shopCount").val(arr1.length); } </script> </body> </html> =========================================================================================== controller層 @SystemControllerLog(description = "彈出層頁面") @RequestMapping(value = "/rich{shpstoreids}", method = RequestMethod.GET) public String rich(HttpServletRequest request, PageForm pageForm, Model model,@RequestParam("shpstoreids") String shpstoreids) { int len=shpstoreids.split(",").length; request.setAttribute("shopsIds",shpstoreids); request.setAttribute("shopsCount",len); // System.out.println(shpstoreids+"*****************************************"); return "mission/rich"; } @SystemControllerLog(description = "彈出層服務商查詢") @RequestMapping(value = "/getallshops", method = RequestMethod.GET) @ResponseBody public List<EappShpstore> getMerchartsByNameLike(HttpServletRequest request) { List<EappShpstore> list = eappShpstoreService.selectAll(); return list; } @SystemControllerLog(description = "添加/修改任務") @RequestMapping(value = "/saveorupdate", method = RequestMethod.POST) public String save(HttpServletRequest request, Model model, EappMissionVo eappMissionVo) { eappMissionVo.setShpstoreids(eappMissionVo.getShpstoreids()); request.getSession().setAttribute("url", "mission/list"); return String.format("redirect:/message"); }