首页 新闻 搜索 专区 学院

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
ComeOfCome的主页 ComeOfCome | 初学一级 | 园豆:160
提问于:2015-07-26 17:29
< >
分享
所有回答(1)
0

至少得把代码贴出来吧,还有就是什么浏览器。

Firen | 园豆:5483 (大侠五级) | 2015-07-31 07:01

IE浏览器,代码的话.这要贴的太多了吧,单独那个页面就有15个js以上.只是问问有人遇到过这样的情况没.因为jqgrid在第一个iframe中加载的a.jsp中的table_01中加载jqgrid的表格,我编辑一行数据保存让iframe跳转到b.jsp,在b.jsp中我还是利用原来的table_01来显示.然后按回退键回到a.jsp,这时就会看到有2行一样的数据.其实我调试了一下,第二行数据是因为回退的时候我再一次调用数据库.但是原来的那条应该是不会保存到历史记录里面的. 我做过实验,确跟我的项目是不一样的.我贴个实验代码吧.

支持(0) 反对(0) ComeOfCome | 园豆:160 (初学一级) | 2015-07-31 10:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册