首页
所有分类
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 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
jquery实现弹出层效果实例
May 19 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
在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
BOSE(2) 摩托罗拉(1) 耳机(1) MOTOROLA(1) 66-XI(1) 收信机(3) 音箱(1) ICF-2010(1) 晶体管(2) 77A(2)
You might like
一个PHP的String类代码
2010/04/20 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
2016/02/25 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
深入探究node之Transform
2017/07/20 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
HMV日本官网：全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Vans(范斯)德国官网：美国南加州的原创极限运动潮牌
2017/05/02 全球购物
长曲棍球装备：Lacrosse Monkey
2020/12/02 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
助学感谢信范文
2015/01/21 职场文书
神农溪导游词
2015/02/11 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
党性教育心得体会（共6篇）
2016/01/21 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang