应用场景

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}/p_w_picpaths/fancybox/fancy_close.png' style='width: 20px; height: 20px' οnclick=\"delRow(this,"+rowId+")\"/>\ 
  21.         </td>" 
  22.     strTem+="</tr>"
  23.     return strTem; 
  24. });