easyui分頁，編輯datagrid某條數據保存以后跳轉到某一頁

參考資料：http://caizhilin2010.iteye.com/blog/1731698

問題：商品列表頁面采用easyui的datagrid展示數據，編輯某行數據保存以后，要求跳轉到

　　　　用戶在編輯之前翻到的那一頁。

實踐：為了方便描述，這里將數據展示頁面叫做頁面A.jsp，編輯頁面叫做B.jsp。

1、改造以前的樣子

A.jsp

<script type="text/javascript">
var $dg;
var $grid;
$(function() {
　　　　$grid=$dg.datagrid({
                        url : "${getDataUrl}",
                        width : 'auto',
                        height : $(this).height()-85,
                        pagination:true,
                        rownumbers:true,
                        border:true,
                        striped:true,
                        singleSelect:true,
                        columns : [ [ {field : 'goodsName',title : '商品標題',width : parseInt($(this).width()*0.3)},
                                      {field : 'goodsSn',title : '款號',width : parseInt($(this).width()*0.2)},
                                      {field : 'img1',title : '圖片',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.img1 != '')
                                                  return "<img src = '"+row.img1+"'/>";
                                              else
                                                  return "<img src = '"+row.img1+"'/>";  
                                            }
                                      },
                                      {field : 'categoryId',title : '分類',width : parseInt($(this).width()*0.1),align : 'left',
                                            formatter:function(value,row){
                                              var cates = row.categorys;
                                              for(var i=0;i<cates.length;i++){
                                                  if(cates[i].categoryId === row.categoryId){
                                                      return cates[i].categoryName;
                                                  }
                                              } 
                                            }
                                      },
                                      {field : 'goodsNumber',title : '庫存',width : parseInt($(this).width()*0.1)},
                                      {field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.isOnSale){
                                                  return "<font color=green>是<font>";
                                              } else{
                                                  return "<font color=red>否<font>"; 
                                              }
                                            }
                                      },
                                      {field : 'isBest',title : '推薦',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.isBest){
                                                  return "<font color=green>是<font>";
                                                } else{
                                                    return "<font color=red>否<font>"; 
                                                }
                                          }
                                      },
                                      {field : 'lastUpdate',title : '上架時間',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                                var thisDate = new Date(row.lastUpdate);
                                                  return formatterDate(thisDate);
                                          }
                                      }
                                      ] ],toolbar:'#tb'
                    });
});

//編輯
            function editOneGood() {
                var row = $dg.datagrid('getSelected');
                if (row) {
                    window.location.href="/leslie/goods/showEditGoods?goodsId="+row.goodsId+"&inStorage="+${inStorage};
                }else{
                    parent.$.messager.show({
                        title :"提示",
                        msg :"請選擇一行記錄!",
                        timeout : 1000 * 2
                    });
                }
            }

</script>

B.jsp

<c:choose>
    <c:when test='${inStorage eq 1}'>
        <c:set var="afterSaveSuccessUrl" value="${pageContext.request.contextPath}/leslie/showGoodsInStorage" scope="request" />
    </c:when>
    <c:otherwise>
        <c:set var="afterSaveSuccessUrl" value="${pageContext.request.contextPath}/leslie/showGoodsOnSale" scope="request" />
    </c:otherwise>
</c:choose>
<script type="text/javascript">
    
    $(function() {
        $("#form").form({
            url : "${pageContext.request.contextPath}/leslie/saveGood",
            onSubmit : function() {
                $.messager.progress({
                    title : '提示',
                    text : '數據處理中，請稍后....'
                });
                return true;
            },
            success : function(result) {
                $.messager.progress('close');
                result = $.parseJSON(result);
                if (result.status) {
                    $.messager.show({
                        title : result.title,
                        msg : result.message,
                        timeout : 1000 * 2
                    });
                    setTimeout(
                        function(){
                            window.location.href="${afterSaveSuccessUrl}";
                        },
                        1000 * 1
                    );
                } else {
                    $.messager.show({
                        title : result.title,
                        msg : result.message,
                        timeout : 1000 * 5
                    });
                }
            }
        });
    });
</script>

2.改造思路：

(1) 改造A.jsp， 在A.jsp中，將當前datagrid的頁數作為打開B.jsp的url的參數。

    關鍵：在js中取得datagrid當前的頁數

　　var options = $dg.datagrid('getPager').data("pagination").options;
　　var curr = options.pageNumber; //獲得當前頁

(2) 改造B.jsp，在B.jsp中，將傳進來的頁數作為表單提交成功以后跳轉url的參數，這個url其實正是A.jsp。

　關鍵：傳入pageNumber參數

　　<c:choose>

　　　　<c:when test='${inStorage eq 1}'>
　　　　　　<c:set var="afterSaveSuccessUrl" value="${pageContext.request.contextPath}/goods/showGoodsInStorage?pageNumber=${pageNumber }" scope="request" />
　　　　</c:when>
　　　　<c:otherwise>
　　　　　　<c:set var="afterSaveSuccessUrl" value="${pageContext.request.contextPath}/goods/showGoodsOnSale?pageNumber=${pageNumber }" scope="request" />
　　　　</c:otherwise>
　　</c:choose>

(3) 繼續改造A.jsp，將傳進來的頁數作為datagrid的“當前頁數”參數。

　　關鍵：datagrid的pageNumber參數

　　　　$grid=$dg.datagrid({
　　　　　　url : "${getDataUrl}",
　　　　　　width : 'auto',
　　　　　　height : $(this).height()-85,
　　　　　　pagination:true,
　　　　　　pageNumber:thisPageNumber,

　　　　　　.....

　　　　}

3.改造后的程序：

A.jsp

<script type="text/javascript">
            var $dg;
            var $grid;
            var thisPageNumber = '${pageNumber}';
            $(function() {
                 $dg = $("#dg");
                 if(thisPageNumber == '-1'){
                     $grid=$dg.datagrid({
                        url : "${getDataUrl}",
                        width : 'auto',
                        height : $(this).height()-85,
                        pagination:true,
                        rownumbers:true,
                        border:true,
                        striped:true,
                        singleSelect:true,
                        columns : [ [ {field : 'goodsName',title : '商品標題',width : parseInt($(this).width()*0.3)},
                                      {field : 'goodsSn',title : '款號',width : parseInt($(this).width()*0.2)},
                                      {field : 'img1',title : '圖片',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.img1 != '')
                                                  return "<img src = '"+row.img1+"'/>";
                                              else
                                                  return "<img src = '"+row.img1+"'/>";  
                                            }
                                      },
                                      {field : 'categoryId',title : '分類',width : parseInt($(this).width()*0.1),align : 'left',
                                            formatter:function(value,row){
                                              var cates = row.categorys;
                                              for(var i=0;i<cates.length;i++){
                                                  if(cates[i].categoryId === row.categoryId){
                                                      return cates[i].categoryName;
                                                  }
                                              } 
                                            }
                                      },
                                      {field : 'goodsNumber',title : '庫存',width : parseInt($(this).width()*0.1)},
                                      {field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.isOnSale){
                                                  return "<font color=green>是<font>";
                                              } else{
                                                  return "<font color=red>否<font>"; 
                                              }
                                            }
                                      },
                                      {field : 'isBest',title : '推薦',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.isBest){
                                                  return "<font color=green>是<font>";
                                                } else{
                                                    return "<font color=red>否<font>"; 
                                                }
                                          }
                                      },
                                      {field : 'lastUpdate',title : '上架時間',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                                var thisDate = new Date(row.lastUpdate);
                                                  return formatterDate(thisDate);
                                          }
                                      }
                                      ] ],toolbar:'#tb'
                    });
                 }else{
                     $grid=$dg.datagrid({
                        url : "${getDataUrl}",
                        width : 'auto',
                        height : $(this).height()-85,
                        pagination:true,
                        pageNumber:thisPageNumber,
                        rownumbers:true,
                        border:true,
                        striped:true,
                        singleSelect:true,
                        columns : [ [ {field : 'goodsName',title : '商品標題',width : parseInt($(this).width()*0.3)},
                                      {field : 'goodsSn',title : '款號',width : parseInt($(this).width()*0.2)},
                                      {field : 'img1',title : '圖片',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.img1 != '')
                                                  return "<img src = '"+row.img1+"'/>";
                                              else
                                                  return "<img src = '"+row.img1+"'/>";  
                                            }
                                      },
                                      {field : 'categoryId',title : '分類',width : parseInt($(this).width()*0.1),align : 'left',
                                            formatter:function(value,row){
                                              var cates = row.categorys;
                                              for(var i=0;i<cates.length;i++){
                                                  if(cates[i].categoryId === row.categoryId){
                                                      return cates[i].categoryName;
                                                  }
                                              } 
                                            }
                                      },
                                      {field : 'goodsNumber',title : '庫存',width : parseInt($(this).width()*0.1)},
                                      {field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.isOnSale){
                                                  return "<font color=green>是<font>";
                                              } else{
                                                  return "<font color=red>否<font>"; 
                                              }
                                            }
                                      },
                                      {field : 'isBest',title : '推薦',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                              if(row.isBest){
                                                  return "<font color=green>是<font>";
                                                } else{
                                                    return "<font color=red>否<font>"; 
                                                }
                                          }
                                      },
                                      {field : 'lastUpdate',title : '上架時間',width : parseInt($(this).width()*0.1),align : 'left',
                                          formatter:function(value,row){
                                                var thisDate = new Date(row.lastUpdate);
                                                  return formatterDate(thisDate);
                                          }
                                      }
                                      ] ],toolbar:'#tb'
                        });
                 }
});
　　　　　　　　function getPageNumber(){
                var options = $dg.datagrid('getPager').data("pagination").options;  
                var curr = options.pageNumber;  //獲得當前頁
                return curr;
            }
            
            //編輯
            function editOneGood() {
                // console.log("run edit");
                var row = $dg.datagrid('getSelected');
                var curr = getPageNumber();
                if (row) {
                    window.location.href="/leslie/goods/showEditGoods?goodsId="+row.goodsId+"&inStorage="+${inStorage}+"&pageNumber="+curr;
                }else{
                    parent.$.messager.show({
                        title :"提示",
                        msg :"請選擇一行記錄!",
                        timeout : 1000 * 2
                    });
                }
            }
</script>