JQgrid 回退出现bug
0
悬赏园豆：50
[待解决问题]
在IE浏览器上,用JQgrid插件做表格,表格插入1行数据---->提交到下个页面----->按回退----->
出现2条一样的数据.请问这种情况出现的原因是什么,如何解决?本人真在开发javaweb项目
我的命名 jqId.jsp (主jsp) iframe中的jsp(jqId1.jsp,jqId2.jsp) (实验的时候并不会保存第一条jqId1.jsp编辑的历史记录)
实验代码贴在下面.我的项目现象是,当我从jqId2.jsp回退到jqId1.jsp时 在jq_table_01中数据叠加.而且报的错误是colModel没有找到?如果彻底刷新就没问题?!我只是想问问有没有人遇到国这种情况.有的话支一声,或者加q密聊.1064242204
问题补充：
Main
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //var i=1; </script> </head> <body> <iframe frameborder="0" src="<%=request.getContextPath()%>/JSP/jqId1.jsp" width="800" height="600"> </iframe> </body> </html>
iframe 中的 (jqId1.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="<%=request.getContextPath()%>/JS/jqGrid/CSS/ui.jqgrid.css" rel="stylesheet" type="text/css"> <link href="<%=request.getContextPath()%>/JS/jqGrid/CSS/jquery-ui-custom.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../JS/jqGrid/jquery.js"></script> <script type="text/javascript" src="../JS/jqGrid/jquery-ui.js"></script> <script type="text/javascript" src="../JS/jqGrid/jquery.jqGrid.js"></script> </head> <body> <div> <table id="jq_table_01"></table> </div> <input type="button" onclick="addNewRowForJQGrid('jq_table_01')" value="add"/> <div> <a href="<%=request.getContextPath()%>/JSP/jqId2.jsp"> to 2</a> </div> <script type="text/javascript"> /* var i2 = parent.i; alert(i2); */ /*$("#jq_table_01").jqGrid({ datatype: "local", height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], multiselect: true, caption: "Manipulating Array Data" }); var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++) $("#jq_table_01").jqGrid('addRowData',i+1,mydata[i]); */ function addNewRowForJQGrid(tableId){ var arrayDefaultValue = {}; var newrowids = new Array(); var grid = jQuery("#"+tableId); index = getMaxRowNum(grid); newrowids[newrowids.length]= index ; grid.jqGrid('addRow',{ rowID : index, initdata : arrayDefaultValue, position :"first", useDefValues : true, useFormatter : true, addRowParams : {extraparam:{}} }); var rowData = []; grid.setGridParam({cellEdit:true,cellsubmit:'clientArray'}); } var lastsel; function getMaxRowNum(grid){ var ids = grid.jqGrid('getDataIDs'); var rowid; if(ids.length>0) rowid = Math.max.apply(Math,ids); else rowid = 0; var index = parseInt(rowid)+1; return index; } $(function(){ if(i2==1){ i2++; jQuery("#jq_table_01").jqGrid({ datatype: "local", height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], multiselect: true, caption: "Manipulating Array Data" , ondblClickRow: function (rowid) { if(rowid && rowid!==lastsel){ jQuery("#jq_table_01").jqGrid('restoreRow',lastsel); lastsel=rowid; } var rowData = jQuery("#jq_table_01").jqGrid("getRowData", rowid); jQuery("#jq_table_01").setGridParam({cellEdit:true,cellsubmit:'clientArray'}); } }); } }); /* var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++) jQuery("#jq_table_01").jqGrid('addRowData',i+1,mydata[i]); */ </script> </body> </html>
//跳转的jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="<%=request.getContextPath()%>/JS/jqGrid/CSS/ui.jqgrid.css" rel="stylesheet" type="text/css"> <link href="<%=request.getContextPath()%>/JS/jqGrid/CSS/jquery-ui-custom.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../JS/jqGrid/jquery.js"></script> <script type="text/javascript" src="../JS/jqGrid/jquery-ui.js"></script> <script type="text/javascript" src="../JS/jqGrid/jquery.jqGrid.js"></script> </head> <body> <div > <table id="jq_table_01"> </table> </div> <script type="text/javascript"> /* parent.i=2; alert(parent.i); */ jQuery("#jq_table_01").jqGrid({ datatype: "local", height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], multiselect: true, caption: "Manipulating Array Data" }); var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; for(var i=0;i<=mydata.length;i++) jQuery("#jq_table_01").jqGrid('addRowData',i+1,mydata[i]); /* jQuery(document).ready( function(){ jQuery("#jq_table_01").jqGrid({ url:contextPath + "search.action", datatype:"json", //数据来源，本地数据 mtype:"POST",//提交方式 height:420,//高度，表格高度。可为数值、百分比或'auto' //width:1000,//这个宽度不能为百分比 autowidth:true,//自动宽 colNames:['添加日期', '手机号码', '银行卡号','备注','操作'], colModel:[ //{name:'id',index:'id', width:'10%', align:'center' }, {name:'createDate',index:'createDate', width:'20%',align:'center'}, {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'}, {name:'cardNo',index:'cardNo', width:'20%', align:"center"}, {name:'remark',index:'remark', width:'35%', align:"left", sortable:false}, {name:'del',index:'del', width:'10%',align:"center", sortable:false} ], rownumbers:true,//添加左侧行号 //altRows:true,//设置为交替行表格,默认为false //sortname:'createDate', //sortorder:'asc', viewrecords: true,//是否在浏览导航栏显示记录总数 rowNum:15,//每页显示记录数 rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。 jsonReader:{ id: "blackId",//设置返回参数中，表格ID的名字为blackId repeatitems : false }, pager:$('#gridPager') }); } ); */ </script> </body> </html>
跳转的jsp
所有回答(1)
0
至少得把代码贴出来吧，还有就是什么浏览器。
IE浏览器,代码的话.这要贴的太多了吧,单独那个页面就有15个js以上.只是问问有人遇到过这样的情况没.因为jqgrid在第一个iframe中加载的a.jsp中的table_01中加载jqgrid的表格,我编辑一行数据保存让iframe跳转到b.jsp,在b.jsp中我还是利用原来的table_01来显示.然后按回退键回到a.jsp,这时就会看到有2行一样的数据.其实我调试了一下,第二行数据是因为回退的时候我再一次调用数据库.但是原来的那条应该是不会保存到历史记录里面的. 我做过实验,确跟我的项目是不一样的.我贴个实验代码吧.
