父子窗体间传递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 相关文章推荐
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python中有趣在__call__函数
2015/06/21 Python
深入理解python多进程编程
2016/06/12 Python
PyQt5实现下载进度条效果
2018/04/19 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
高级工程师岗位职责
2013/12/15 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
学习十八大演讲稿
2014/09/15 职场文书
健康教育主题班会
2015/08/14 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
简单介绍Python的第三方库yaml
2021/06/18 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js