首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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文本编辑内容的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

叫我18岁的骚年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
js切换div css注意的细节
Dec 10 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jQuery实用技巧必备（下）
Nov 03 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 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
PL660(1) SRF-S83(1) 台湾(1) 直流胆(1) 森海(1) YB400(2) YB235(1) MX500(1) 南麂列岛(1) S2000(3)
You might like
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python Matplotlib库入门指南
2015/05/18 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python爬虫包BeautifulSoup简介与安装（一）
2018/06/17 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Annoushka英国官网：英国奢侈珠宝品牌
2018/10/20 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
商场消防管理制度
2014/01/12 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
工地安全质量标语
2014/06/07 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014年党总支工作总结
2014/12/18 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
采购员工作总结范文
2015/08/12 职场文书
大学生创业计划书
2019/06/24 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python