父子窗体间传递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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
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函数
2006/12/06 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Vue组件的使用教程详解
2018/01/05 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
详解Python爬虫的基本写法
2016/01/08 Python
Python爬取成语接龙类网站
2018/10/19 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
python 如何对logging日志封装
2020/12/02 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
linux面试题参考答案(11)
2016/11/26 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
营销与策划个人求职信
2013/09/22 职场文书
英语复习计划
2015/01/19 职场文书
机关保密工作承诺书
2015/05/04 职场文书
创业计划书之干洗店
2019/09/10 职场文书