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 ...

随机推荐

Locust 源码理解与分析
前言相信很多小伙伴会选择Locust作为压测工具辅助测试,本文从Locust源码开始分析它的优劣,结论在最后,最终我还是选择了Jmeter 主要分析了Locust源码的两个文件:main.py 和 ...
Oracle -操作数据库
删除数据: delete:用delete删除记录,Oracle系统会产生回滚记录,所以这种操作可以使用ROLLBACK来撤销 truncate:删除数据时,不会产生回滚记录.所以执行速度相对较快些可 ...
Codeforces #576 Rectangle Painting 1 | div1D | div2F | DP | Rustlang
原题链接大意 n*n正方形有黑有白每次可以选择一个矩形把它全变成白色,代价是max(长,宽) 求吧整个正方形全变白的最小代价数据范围 n <= 50 题解首先如果我们刷了两个 ...
OSG+Visual Studio2015项目变量设置；
OSG源码经过CMAKE编译后: 1.配置OSG环境变量: 用户变量的PATH中添加路径 C:\OSG\bin系统变量中添加新变量OSG_FILE_PATH为 C:\OSG\data 2.VS新建项目 ...
java反射(三)--反射与操作类
一.反射与操作类在反射机制的处理过程之中不仅仅只是一个实例化对象的处理操作,更多的情况下还有类的组成的操作,任何一个类的基本组成结构:父类(父接口),包,属性,方法(构造方法,普通方法)--获取类的 ...
php分割url，获取参数query
#测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址echo $_SERVER['HTTP_HOST']."<br> ...
C++中初始化列表的使用
1,初始化列表是在 C++ 中才引入的: 2,以“类中是否可以定义 const 成员?”这个问题来引入初始化列表: 1,const 这个关键字可以定义真正意义上的常量,也可以在某些情况下定义只读变量: ...
docker--shell和Exec格式
shell格式 RUN apt-get install -y vim CMD echo "docker so easy" ENTRYPOINT echo "docker ...
Riverside Curio
Riverside Curio time limit per test1 second memory limit per test256 megabytes Arkady decides to obs ...
db2表
生成列: CREATE TABLE t1 (c1 INT, c2 DOUBLE, c3 DOUBLE GENERATED ALWAYS ...

layui弹出层回调的使用

layui弹出层回调的使用的更多相关文章

随机推荐

热门专题