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