首页
所有分类
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 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
jquery实现抽奖功能
Oct 22 jQuery
vue项目配置sass及引入外部scss文件
Apr 14 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
矩阵(1) bs4(1) 读取(1) agg(1) pandas(7) 数据保存(1) 数组(5) 音频(1) apply(1) mp3Play(1)
You might like
论建造顺序的重要性
2020/03/04 星际争霸
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
学年末自我鉴定
2014/01/21 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
六查六看心得体会
2014/10/14 职场文书
期中考试复习计划
2015/01/19 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
Linux中文件的基本属性介绍
2022/06/01 Servers