父子窗体间传递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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
JavaScript实现简单验证码
Aug 24 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
js实现的网页颜色代码表全集
2007/07/17 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
Node.js文件操作详解
2014/08/16 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
微信JS接口大全
2016/08/25 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
Python3中使用PyMongo的方法详解
2017/07/28 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python3中编码获取网页的实例方法
2020/11/16 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
门卫人员岗位职责
2013/12/24 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
导游词之山海关
2019/12/10 职场文书
Python Flask实现进度条
2022/05/11 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers