父子窗体间传递JSON格式的数据的代码


Posted in Javascript onDecember 25, 2010

如果某个一级评分项包含评分子项,则点击该评分项时,再弹出一个新窗口,新窗体中列出了当前评分项的所有评分子项列表,供用户进行操作。用户操作完成后,点击“确定”按钮,则返回到父窗体,在子窗体中所有的操作结果,同时要带到父窗体中。同时,如果用户再次点击该评分项,则在弹出子窗体的同时,要将上次操作的结果绑定到对应的操作项上。

上面描述的例子,就涉及到了一个父子窗体间的数据传递。如何实现这一数据传递,当然有很多方法。这里只是记录一下在这个例子中我使用的方法。我的方法是在子窗体点击“确定”按钮时,将操作结果构造成json格式的字符串,通过调用父窗体上的方法:opener.方法(),将json格式数据传递到父窗体上。

此例中构造的json数据类似如下格式:

{"MyData":[

{"bh":"111","lx":"1","df":"10","bz":"aaa"},

{"bh":"112","lx":"2","df":"20","bz":"bbb"},

{"bh":"113","lx":"2","df":"30","bz":"ccc"}

]}

此处子项打分需要保持的分别是bh:编号;lx:类型;df:得分;bz:备注。

按照自己的需要,可以再自己增加需要保持的项。构造此json数据可以放在前台,也可以放在后台。

在此例中,我是放置后台的。代码如下:

StringBuilder jsonBuilder = new StringBuilder(); 
jsonBuilder.Append("@{\""); 
jsonBuilder.Append("MyData"); 
jsonBuilder.Append("\":["); int k = bh.Split(',').Length + 1; 
for (int i = 0; i < bh.Split(',').Length; i++) 
{ 
tem += "update KH_PFX set DF = '"+EncriptLib.EncriptLib.EncodeCode(Convert.ToDouble(df.Split(',')[i].ToString().Trim()))+"',"; 
tem += "BZ = '"+bz.Split(',')[i].ToString().Trim()+"',PFRXM = '"+Session["XM"].ToString()+"',"; 
tem += "PFRBH = '"+Session["YHBH"].ToString()+"',PFRQ = to_date('"+DateTime.Now.ToShortDateString()+"','yyyy-MM-dd')"; 
tem += " where BH = '"+bh.Split(',')[i].ToString().Trim()+"'"; 
tem += "?e"; //此处用此特殊的符号来分隔sql语句 
jsonBuilder.Append("{\"bh\":" + "\"" + bh.Split(',')[i].ToString().Trim() + "\"" + ","); 
jsonBuilder.Append("\"lx\":" + "\"" + lx.Split(',')[i].ToString().Trim() + "\"" + ","); 
jsonBuilder.Append("\"df\":" + "\"" + df.Split(',')[i].ToString().Trim() + "\"" + ","); 
jsonBuilder.Append("\"bz\":" + "\"" + bz.Split(',')[i].ToString().Trim() + "\"" + "},"); 
} 
if(tem != "") 
{ 
jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
jsonBuilder.Append("]"); 
jsonBuilder.Append("}"); 
Page.ClientScript.RegisterClientScriptBlock(GetType(), "cg", "<Script>window.close();opener.GetZXDF('zxdf" + Request.QueryString["bh"].ToString() + "','" + parent_df.Text.Trim() + "','" + jsonBuilder.ToString() + "',\"" + tem + "\");</Script>"); 
}

"@"符号可以防止在jsonBuilder.ToString()后,转义字符“\”的消失。

调用父窗体的GetZXDF()方法,将json数据传递给父窗体。

下面给出子窗体加载时,绑定json数据的代码

$(function() { //加载时获取json,然后绑定打分结果 
var obj = opener.GetJson($("#txt_YCBH").val()); 
if($.trim(obj) != ""){ 
obj = "(" + obj + ")"; 
obj = eval(obj); 
var data = obj.MyData; 
$.each(data, function(i, n) { 
if(n.lx == "1"){ 
//直接打分类的绑定 
$("#lx" + n.bh).siblings("input").eq(0).val(n.df); 
$("#lx" + n.bh).siblings("input").eq(1).val(n.df); 
$("#lx" + n.bh).parent().parent().next().children().children("textarea").val(n.bz); 
} 
if(n.lx == "2"){ 
//选项打分类的绑定 
$("#lx" + n.bh).siblings("input:text").eq(1).val(n.df); 
$("#lx" + n.bh).siblings("input:checkbox").each(function(){ 
if($.trim($(this).val()) == $.trim(n.df)){ 
$(this).attr("checked",true); 
} 
}); 
$("#lx" + n.bh).parent().parent().parent().next().children().children("textarea").val(n.bz); 
} 
});

opener.GetJson()方法是父窗体上用来向子窗体传递json数据的方法,代码如下:
//通过编号获取对应评分项的子项打分结果的json字符串 
function GetJson(p_bh) 
{ 

 //$("#zxdf" + p_bh).siblings("input").eq(1).val()中保存的就是子窗体传递给父窗体的json数据 
return $("#zxdf" + p_bh).siblings("input").eq(1).val(); 
}
Javascript 相关文章推荐
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
React四级菜单的实现
Apr 08 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 #Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 #Javascript
JQuery live函数
Dec 24 #Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 #Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 #Javascript
在JavaScript中获取请求的URL参数
Dec 22 #Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 #Javascript
You might like
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Javascript中的数学函数
2007/04/04 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
跟老齐学Python之集合(set)
2014/09/24 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python实现简单登陆流程的方法
2018/04/22 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python集合删除多种方法详解
2020/02/10 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
自我反省检讨书
2014/01/23 职场文书
毕业留言寄语大全
2014/04/10 职场文书
保护动物倡议书
2014/04/15 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript