应用场景

Web应用中需要弹出任意页面，将操作后的数据在不经过后台直接反馈到父页面。和ajax的区别：1、避免编写大量的后台方法 2、可以弹出普通的页面，支持页面的所有操作

简介

基于jqGrid实现的弹窗返回值插件，全面兼容支持window.returnValue的浏览器；封装

完善，可*扩展，使用方便灵活；为解决web应用高内聚低耦合提供完整的支持

 

使用

l         步骤一

引用插件

1. <script type="text/javascript" src="js/jquery.jqGrid.showWindowReturn.js" ></script> 

 

l         步骤二

父页面调用代码

1. $("#problemAdd").click(function(){ 
2.     var pbmIds="0";//弹窗中不显示的数据 
3.     $("[id^=proIdHid]").each(function(){ 
4.         pbmIds+=","+this.value; 
5.     }); 
6.     var result=Show.dialogWindow('${ctx }/qa/problem/problemIndex.htm?fw=1&swNoIds='+pbmIds); 
7.     $("#problemTable").append(result); 
8. }); 

 

l         步骤三

弹出页面操作代码

1. //需要调用的列(和jqGrid保持一致) 
2. var cols=new Array("descn","type.stringValue","urgentLevel.stringValue" 
3. ,"expectSolutions","resolverUser.name","expectResolveDate","checker.name"); 
4. /* 
5. * 弹窗返回值 
6. * @param1 jqGrid容器Id名称 
7. * @param2 指定列数组集合 
8. * @param3 返回的html片段[function($list,rowId){}] 
9. */ 
10. Show.windowReturn("list",cols,function($list,rowId){ 
11.     var strTem=""; 
12.     strTem+="<tr>"; 
13.     var rowData=$list.jqGrid('getRowData',rowId);//必须不能变 
14.     for(var i=0;i<cols.length;i++){ 
15.         //rowData[cols[i]]当前行每一列数据 
16.         strTem+="<td>"+rowData[cols[i]]+"</td>"; 
17.     } 
18.     strTem+="<td id='option' style='text-align:center'>\ 
19.         <input type='hidden' name='pbmIds' id='proIdHid' value="+rowId+">\ 
20.         <img src='${ctx}/images/fancybox/fancy_close.png' style='width: 20px; height: 20px' onclick=\"delRow(this,"+rowId+")\"/>\ 
21.         </td>" 
22.     strTem+="</tr>"; 
23.     return strTem; 
24. }); 

 

本文转自 沫沫金 51CTO博客，原文链接：http://blog.51cto.com/zl0828/1107739，如需转载请自行联系原作者