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 ...
随机推荐
- 测开之路四十七：Django之请求静态资源与模板
框架必要的配置 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom django.http i ...
- jmeter工作原理介绍，以及常见错误
JMeter结果树响应数据中文乱码解决办法 打开jmeter配置文件搜索encoding修改编码格式改为utf-8 Jmeter服务器反馈登陆不成功问题 导入到JMeter后,执行场景,发现登录校验成 ...
- 刚安装的程序要卸载，如何Ubuntu查看程序安装记录
如果新装一个程序,突然发现需要卸载,又忘记了程序名字,怎么解决呢? /var/log/apt/history.log /var/log/apt/term.log /var/log/aptitude 看 ...
- Redis 系列
Redis 系列 [Redis 系列(01)安装配制] [Redis 系列(02)数据结构] [Redis 系列(03-1)进阶 - 发布订阅] [Redis 系列(03-2)进阶 - 事务] [Re ...
- 递归算法介绍及Java应用实战
什么是递归算法 递归算法是把问题转化为规模缩小了的同类问题的子问题,然后递归调用函数(或过程)来表示问题的解.一个过程(或函数)直接或间接调用自己本身,这种过程(或函数)叫递归过程(或函数). 递归过 ...
- QT下载与安装
1.下载地址:https://www.qt.io/download-open-source/ 2.qt5.5:http://download.qt.io/development_releases/qt ...
- GMTC全球大前端技术大会-未来已来
GMTC-2019北京 GMTC这次的大会的热词肯定是监控.性能,当然跨平台依然是热点,write once,run anywhere!,以下是自己参加的总结心得. 6.20上午 前端的演化 核心理念 ...
- 新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...
- 使用雪花算法为分布式下全局ID、订单号等简单解决方案考虑到时钟回拨
1.snowflake简介 互联网快速发展的今天,分布式应用系统已经见怪不怪,在分布式系统中,我们需要各种各样的ID,既然是ID那么必然是要保证全局唯一,除此之外,不同当业务还需要不同 ...
- 【转】C++ STL中常见容器的时间复杂度
map, set, multimap, and multiset 上述四种容器采用红黑树实现,红黑树是平衡二叉树的一种.不同操作的时间复杂度近似为: 插入: O(logN) 查看:O(logN) 删除 ...