layui弹出层回调的使用
<%@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");
}
layui弹出层回调的使用的更多相关文章
- layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- Layui弹出层、日期和时间选择、即时通讯、分页
Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...
- layer/layui弹出层插件bug
<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...
- Layui弹出层详解
今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦 今天放 ...
- adminlte+layui框架搭建3 - layui弹出层
在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...
- layui弹出层基础参数
一.type-层类型 类型:Number 默认为0(信息框); 1(页面层),可以在页面添加HTML内容 2(iframe层) 3(加载层)加载时显示的弹出框 4(tips层) 需要绑定ID就不展示 ...
- layui弹出层处理（获取、操作弹出层数据等）
要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...
- layer 弹出层 回调函数调用 弹出层页面 函数
1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...
随机推荐
- javascript:void()的理解
href="javascript:void(0);"本身没有任何危害啊,表示这是一个空链接.如果想在网页上用a标签,但又不想产生页面实际跳转动作,就可以这么做.下面是一些用法对比: ...
- 封装token
let baseApiUrl = 'xxxx' var app = getApp(); let defaultHeaders = { 'Content-Type': 'application/json ...
- CPU的架构：x86、arm、mips、龙芯等
在公司经常听其他工程师讲x86,arm平台啥的,作为一个算法工程师,我听过却不知道这是啥!!!(汗颜) 现在偷偷学起: x86,arm,mips等这些都是CPU的架构,不管是手机电脑还是一些嵌入式的设 ...
- spring cloud学习--eureka 01
本博客为学习使用,学习教程翟永超 spring cloud 微服务实战 搭建eureka server注册中心 spring initialize构建spring boot项目 构建网址:https: ...
- HDFS 工具类
读取HDFS上文件数据 import java.io.File; import java.io.FileInputStream; import java.io.IOException; import ...
- this关键字与super关键字区别
this super 1 访问属性 访问本类中属性,如果本类中没有此属性,就从父类继承过来的属性中查找 (遵循就近原则) 访问父类中的属性 2 调用方法 访问本类中方法 直接访问父类中方法 3 ...
- 在Emacs中使用plantuml画UML图
在Emacs中使用plantuml画UML图 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83 ...
- 华为要卖5G技术，虽然我和华为没有一点关系，但是我也很呵呵
http://www.sohu.com/a/340555529_166680 老任头,竟然说出了这样的话,要卖5G技术给西方,然后塑造对手. 按照老任头的脾气,老任头应该不至于胡说八道这样的话,但是呢 ...
- 2018-8-29-win2d-渐变颜色
title author date CreateTime categories win2d 渐变颜色 lindexi 2018-08-29 08:58:14 +0800 2018-7-7 20:5:3 ...
- crontab+selenium不能定时执行测试的原因
上一篇我提到用无界面selenium实现网页的自动签到.本来测试好好 的没问题,但是加进crontab定时任务却一点动静页没有,后来发现是浏览器的显示问题,自动任务要这样写: 12 3 * * * e ...