<%@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");
}