layer.open提交子页面的form和layedit文本编辑内容的方法


Posted in Javascript onSeptember 27, 2019

主要 用到layer 自带的取子页面dom的方法 layer.getChildFrame(),在父页面对子页面dom进行操作

js代码:在layer.open 中 btn yes function(index, layero){ }中 获取子页面的dom 进行操作:

$("a[name='editNews']").click(function() {
			layer.open({
				type: 2,
				title: '编辑',
				shadeClose: true,
				shade: 0.8,
				area: ['99%', '99%'],
				offset: ['2px'],
				content: '/gcsoft/news/getNewsDetailById.action?itemId=' + 
    $(this).attr("data-value"),
				btn: ['提交', '取消'],
				yes: function(index, layero) {
 
     //取子页面的form
					var newsFrom = layer.getChildFrame('#newsFrom', index);
 
 
     //取子页面的layeidt LAY_layedit_1 
var layeditCt = layer.getChildFrame('#LAY_layedit_1',index).contents().find('body');
 
     //获取layedit中的html标签 并且赋值给子页面定义的Id为'content' textarea
					layer.getChildFrame('#content', index).val(layeditCt[0].innerHTML);
 
 
					if(newsFrom.find("#menuId").val() == '' || 
     newsFrom.find("#menuId").val() == -1 || newsFrom.find("#title").val() 
     == '') {
						layer.msg('标题和栏目不能为空');
						return
					}
 
 
			  //ajax提交
					$.ajax({
						type: "POST",
						dataType: "json",
						url: "/gcsoft/news/addOrUpdateNews.action",
						data: newsFrom.serialize(),//newsForm序列化
						success: function(result) {
							layer.msg('保存成功!');
							layer.closeAll();
						},
						error: function() {
							alert("异常!");
						}
					});
				},
				btn2: function() {
					window.location.reload();
				}
			});
		});

HTML 代码: 可以忽略不看

<div class="container-fluid">
		<div class="row-fluid">
				<div class="box">
				<nav aria-label="breadcrumb">
					 <ol class="breadcrumb">
					 <li class="breadcrumb-item"><a href="/gcsoft/news/listAllNews.action" rel="external nofollow" >信息列表</a></li>
					 <li class="breadcrumb-item active" aria-current="page">新增/修改信息</li>
					 </ol>
			 </nav>
				<div>
				<div class="container">
				<form id="newsFrom" class="form-horizontal input-prepend" method="post" >
				<div class="row">
				 <div class="col-sm-6">
				 <div class="input-group mb-4">
					 <div class="input-group-prepend">
					 <span class="input-group-text">新闻标题</span>
					 </div>
					 <input type="text" class="form-control" id="title" name="title" value="<#if news ??>${news.title}</#if>">
					</div>
				 </div>
				 
				 <div class="col-sm-6">
					<div class="input-group mb-3">
					 <div class="input-group-prepend">
					 <span class="input-group-text">作者</span>
					 </div>
		    	<input type="text" class="form-control" id="wen" name="wen" value="<#if news ??>${news.wen}</#if>">
 						<span id="wen_span" class="help-inline"> </span>
					</div>				 
				 </div>
				 </div>
				<div class="row">
	 			 <div class="col-sm-4">
	 			 <div class="input-group mb-3">
				 <div class="input-group-prepend">
				 <label class="input-group-text" for="inputGroupSelect01">一级栏目</label>
				 </div>
				 <select class="custom-select" id="Select1" ><option value="-1">------------------ 空 ------------------ </option></select>   
				 </div>
	 			 </div>
				 <div class="col-sm-4">
				 <div class="input-group mb-3">
				 <div class="input-group-prepend">
				 <label class="input-group-text" for="inputGroupSelect01">二级栏目</label>
				 </div>
				 <select class="custom-select" id="Select2" ><option value="-1">------------------ 空 ------------------ </option></select>   
				 </div>
				 </div>
				 <div class="col-sm-4">
				 <div class="input-group mb-3">
				 <div class="input-group-prepend">
				 <label class="input-group-text" for="inputGroupSelect01">三级栏目</label>
				 </div>
				 <select class="custom-select" id="Select3"><option value="-1">------------------ 空 ------------------ </option></select>   
				 </div>
				 </div>
				 <input type="hidden" check-type="required" id="menuId" name="menuId" value="<#if news ??>${news.menuId}<#else>0</#if>">
				</div>
				<div class="row">
	 			 <div class="col-sm-6">
	 			 <div class="input-group mb-3">
				 <input type="text" class="form-control" name="imgUrl" id="imgUrl" value="<#if news ??>${news.imgUrl}</#if>" >
				 <div class="input-group-append">
				 <button class="btn btn-outline-secondary" type="button" id="imageUpload">上传图片</button>
				 <button class="btn btn-outline-secondary" type="button" id="imageDele" >删除图片</button>
				 </div>
				 </div>
	 			 </div>
				 <div class="col-sm-6">
	 			 <div class="input-group mb-3">
				 <input type="text" class="form-control" name="videoUrl" id="videoUrl" value="<#if news ??>${news.videoUrl}</#if>" >
				 <div class="input-group-append">
				 <button class="btn btn-outline-secondary" type="button" id="videoUpload">上传视频</button>
				 <button class="btn btn-outline-secondary" type="button" id="videoDele" >删除视频</button>
				 </div>
				 </div>				 
				 </div>
				</div>
				<div class="row">
				 <div class="col-sm-3">
	 			 <div class="input-group mb-4">
				 <div class="input-group-prepend">
				 <label class="input-group-text" for="inputGroupSelect01">部门</label>
				 </div>
				 <select class="custom-select" data-rel="chosen" id="origin" name="origin" value="<#if news ??>${news.itemFrom}</#if>">
						<#if dept ??>
	    			<#list dept as domainInfo>
		    			<#if news ??>
									<#if domainInfo.infoCode = news.origin>
			    				<option value="${domainInfo.infoCode}" selected="selected"> ${domainInfo.infoName} </option>
			    			<#else>
			    				<option value="${domainInfo.infoCode}"> ${domainInfo.infoName} </option>
			    			</#if>
			    		<#else>
			    			<option value="${domainInfo.infoCode}"> ${domainInfo.infoName} </option>
								</#if>
	    			</#list>
	    		</#if>
	    	</select> 
				 </div>
	 			 </div>
				 <div class="col-sm-3">
					<div class="input-group mb-3">
					 <div class="input-group-prepend">
					 <span class="input-group-text">发表时间</span>
					 </div>
		    <input type="text" class="form-control datepicker" id="itemTime" name="itemTime" value="<#if news ??>${news.itemTime}</#if>">
 					 <span id="itemTime_span" class="help-inline"> </span>
					</div>				 
				 </div>	
				 			 
				 <div class="col-sm-2">
					<div class="input-group mb-3">
					 <div class="input-group-prepend">
					 <span class="input-group-text" >排序</span>
					 </div>
					 <input type="text" class="form-control" id="orderBy" name="orderBy" value="<#if news ??>${news.orderBy}</#if>" οnkeyup="this.value=this.value.replace(/\D/g,'')"/>
					</div>				 
				 </div>
				 
				 
				</div>
				<div class="row">
				<div class="col-sm-12" style="margin-bottom: 20px">
				<textarea name="content" id="content" style="display: none;"><#if news ??>${news.content}</#if></textarea>
							<div id="xhePanel" style="top: 50px;left: 50px;">
							<div class="xheMenu">
								<a href="javascript:void('1')" rel="external nofollow" title="极小" v="1" role="option" aria-setsize="8" aria-posinset="1" tabindex="0"><span style="font-size:10px;">极小(10px)</span></a>
								<a href="javascript:void('2')" rel="external nofollow" title="特小" v="2" role="option" aria-setsize="8" aria-posinset="2" tabindex="0"><span style="font-size:12px;">特小(12px)</span></a>
								<a href="javascript:void('3')" rel="external nofollow" title="小" v="3" role="option" aria-setsize="8" aria-posinset="3" tabindex="0"><span style="font-size:14px;">小(14px)</span></a>
								<a href="javascript:void('4')" rel="external nofollow" title="默认" v="4" role="option" aria-setsize="8" aria-posinset="4" tabindex="0"><span style="font-size:16px;">默认(16px)</span></a>
								<a href="javascript:void('5')" rel="external nofollow" title="中" v="5" role="option" aria-setsize="8" aria-posinset="5" tabindex="0"><span style="font-size:18px;">中(18px)</span></a>
								<a href="javascript:void('6')" rel="external nofollow" title="大" v="6" role="option" aria-setsize="8" aria-posinset="6" tabindex="0"><span style="font-size:24px;">大(24px)</span></a>
								<a href="javascript:void('7')" rel="external nofollow" title="特大" v="7" role="option" aria-setsize="8" aria-posinset="7" tabindex="0"><span style="font-size:32px;">特大(32px)</span></a>
								<a href="javascript:void('8')" rel="external nofollow" title="极大" v="8" role="option" aria-setsize="8" aria-posinset="8" tabindex="0"><span style="font-size:48px;">极大(48px)</span></a>
							</div>
						</div>	
				</div>
				</div>
				<input type="hidden" id="itemId" name="itemId" value="<#if news ??>${news.itemId}</#if>">
 
				</form>
				</div>									  
				</div>
				</div>		
		</div>
	</div>

以上这篇layer.open提交子页面的form和layedit文本编辑内容的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 #Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 #Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
vue调用语音播放的方法
Sep 27 #Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 #Javascript
You might like
PHP程序员基本要求和必备技能
2014/05/09 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python自动生产表情包
2017/03/17 Python
python 全局变量的import机制介绍
2017/09/07 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
给酒店员工的表扬信
2014/01/11 职场文书
集中整治工作方案
2014/05/01 职场文书
个人安全生产承诺书
2014/05/22 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
感谢信
2019/04/11 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
浅谈克隆 JavaScript
2021/11/02 Javascript