沫沫金::jqGrid插件-弹窗返回值

简介:   应用场景 Web应用中需要弹出任意页面,将操作后的数据在不经过后台直接反馈到父页面。和ajax的区别:1、避免编写大量的后台方法 2、可以弹出普通的页面,支持页面的所有操作 简介 基于jqGrid实现的弹窗返回值插件,全面兼容支持window.

 

应用场景

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. }); 

 

目录
相关文章
|
1月前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
18 1
jQuery模态框弹窗提示代码
|
7月前
|
JavaScript
jQuery跟随提示信息
jQuery跟随提示信息
|
7月前
|
JavaScript
jquery多图片上传预览demo效果示例(整理)
jquery多图片上传预览demo效果示例(整理)
|
9月前
|
JavaScript
|
JavaScript
jQuery自定义美化下拉框
在线演示 本地下载
844 0
|
JavaScript 前端开发
|
JavaScript 前端开发 存储
jquery列表点击加载更多
原生点击按钮加载更多(懒加载,每次加载N个) *{margin: 0;padding:0;list-style: none;} body{background: #333;font-size:...
19230 0
|
JavaScript 容器 前端开发