easyui分页,编辑datagrid某条数据保存以后跳转到某一页

时间:2023-03-09 06:27:07
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>