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

最新推荐文章于 2023-02-01 00:46:16 发布
最新推荐文章于 2023-02-01 00:46:16 发布
阅读量431 收藏
点赞数 1
文章标签： javascript 人工智能 ViewUI

参考资料：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>

 

weixin_34407348
关注
easyUI分页中，如何实现页面跳转，再返回时，仍然到跳转前页数。（含页面显示条数）
zhaoyizhilan的博客
07-21 5452
easyUI中，分页情况下，跳转到其他页面修改数据，再返回时，相当于重新打开此页面，即显示第一页。 这样很不方便。故提出跳转回修改前的页面的需求。 通过网上搜索，了解到实现页面跳转回去的基本原理是：传递当前页码到另一页，然后另外一页接收页码值再传回到原页面。如果考虑页面显示条数的变动，也可以将页面显示条数值进行传递。 不过多废话，直接上源码，仅需在需更改的页面添加如下代码即可。 一、带有分页
EasyUI【DataGrid数据查询】
m0_64522859的博客
05-09 1584
如需温习上一节内容，请点击下方链接进行跳转：EasyUI(Tree后端工作)_云彩123的博客-CSDN博客用户信息表（T_User）列名数据类型长度允许空默认值说明idvarchar36Nuuid()主键，ID号ushttps://blog.csdn.net/m0_64522859/article/details/124647333 目录 1.DataGrid 1.1 DataGrid基本属性 1.1.1 基本属性 1.2 DataGrid事件 1.3 DataGrid分页 2.Dialo.
easyui 中的datagrid跨页勾选问题的实现方法
01-19
easyui的datagrid分页显示数据，如果有需求要求勾选多条数据且不再同一页中，easyui会保存在其他页选中的数据吗？ 一开始在网上查阅有人说easyui中没有此方法，需要自己写，但其实至少在1.4版本后只要在datagrid中加入   idField:’id’,给每条数据id属性，easyui就默认就会保留之前勾选的信息，如果没有id，才会出现换页后，之前勾选的信息没有的情况。所以说网络是个好东西，但你要有分辨的能力！ 下面是部分代码： $weldingBomInstanceGrid=$(#weldingBomInstanceGrid). datagrid({ s
easyui datagrid 跳转指定页面问题
top_gun_1的专栏
03-08 1万+
问题        项目中使用到用easyui-datagrid 来做表格，使用中发现一个问题，就是需要跳转到指定页时，总是会回到第一页中，那时候还没找到问题原因，然后跟踪程序debug了一下，发现这个datagrid有加载两次数据，第一次是加载的我们所需要的指定页面数据，第二次是加载的第一页的数据。 情况         当时我就想着可能是自己的代码有冲突之类的，然后就去找JS，在
Easyui datagrid 实现跳过指定行点击列标题排序
liuganhaha的博客
10-23 991
由于要跳过汇总行，所以不能用Easyui自带的排序方法，所以写了此方法实现；除了跳过指定行以外，还可以扩展，定义列排序的方法； 使用了冒泡排序。 $(".datagrid-cell").click(function () {         var sort = $(this).parent("td").attr("field");  //取点击排序的列对应字段值         var fi...
解决EasyUi中的DataGrid删除一条记录后，被删除的数据仍处于被选中状态问题
majian_1987的专栏
03-25 6279
项目中遇到这么一个问题，在easyui的datagrid中，删除一条记录成功，重新加载datagrid后，去点编辑操作，仍可把之前删除掉的那条记录进行编辑操作，正常情况应该是，删除后再去点击“编辑”，应提示没有被选中的记录。现在这个情景说明，在datagrid删除数据重新加载后，当datagrid调用getSelections方法时，仍能返回之前删除的那条记录。这时，要解决这个问题，应该在删除数据
用easyUI中的datagrid想在修改完成后页面还停留在当前页面 而且页面没有明显的刷新
铸剑为犁6666666的博客
05-25 1939
easyui Datagrid 数据列表比较上一个上传的增加了超链接并传值、条件清空、日期控件清空和数据修改功能
07-17
EasyUI的Datagrid是一款强大的数据展示组件，常用于Web应用中的数据管理。它提供了一整套功能，使得在网页上实现复杂的数据操作变得简单。基于提供的标题和描述，我们可以深入探讨以下几个关键知识点： 1. **超链接...
easyui DataGrid动态编辑
04-10
DataGrid是EasyUI的核心组件之一，它允许用户在表格中查看、编辑和操作数据。动态编辑意味着用户可以随时在表格内添加、修改或删除记录，而无需跳转到单独的编辑页面。这对于提高用户体验和提升数据处理效率至关重要...
easyUI的datagrid 分页保存选中状态
cwj1103
07-27 2636
onLoadSuccess:function(data){ var rows = data.rows; //从编辑页面传过来的指标编码 var indeCodes=$("#indeCodes").val(); var n=indeCodes.split(';').length-1
jquery easyui datagird删除最后一页，显示前一页
小痞子
09-10 998
需求：                        如下图，有24页，当我在24页全选删除的时候，删除成功之后应自动跳入23页，显示23页的所有数据！ 解决方案：            1、首先以为表格可以自带，但是如果你不做任何处理，它会在你删除了24页之后，分页栏会显示 page 24 of 23 然后上面的表格内容是空的。            2、想在表格加载之后
使用easyUI遇到的一些小问题
wuzhenzhen909's blog
07-03 398
1、easyUI中条件查询后表格会移动 原因：给表格的单元格设置了宽度 2、html中标签的id要唯一，不然会混乱，按id赋值时会赋给找到的第一个id 3、easyUI表格没有水平滚动条 原因：设置了fitcolumn=true 和title属性 4、easyUI复选框只能单选，将表格属性中的singleSelect="true"去掉
easyui 页面跳转进入新页面再返回当前页面
qq_35849879的博客
09-23 3189
因为我的后台项目easyui数据采用真分页传值,传入page和rows,后台只返回当前页数值. 在当前页获取当前页面的page和rows var options = $('#dg').datagrid('getPager').data("pagination").options; var page = options.pageNumber;//当前页数 var ro
easyui portal动态加载面板及保存配置
YLiu77的博客
06-17 506
本文使用easyui portal实现动态加载面板、自定义面板位置以及保存配置的面板功能。 html： <div class="modual-main" id="module"> <div style="width: 55%;"> </div> <div style="width: 45%;"> </div> </div> <button class="lay
【EasyUI】datagrid(‘reload‘) 删除数据后表格没有刷新 reload有向后台发送请求 但是表格数据没有刷新
最新发布
weixin_44238215的博客
02-01 1694
必须保证当前页面上可以获取到id对应的元素，可以在浏览器调试工具的console控制台直接测试。1、reload 需要检查表格在初始化datagrid的时候，有没有对url赋值，reload触发时向后台访问的是这个url。2、reload 向后台发送请求时，当前页码和分页大小都是使用当前页面上的查询参数，这点需要注意。以上3点属于是常规的排查，排查后无法解决问题，可以参照第3点，在浏览器调试工具手动执行。
【easyUI】datagrid使用分页时跳转到第一页
逛街的喵啊
07-04 5400
使用refresh方法选择跳转到某一页 var p = $("#datagrid").datagrid("getPager"); $(p).pagination({ pagePosition: "bottom", beforePageText: '第', // 页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg:
带有分页的列表的跳转后，返回时怎么实现保留分页的页数等信息
热门推荐
果果的博客
10-23 1万+
我们通过一个列表，进入了下一个页面，返回列表页面的时候，怎么实现保留页面数据 eg:当我们从列表的第4页去编辑这条信息，那么当编辑完成后我们是不是返回到列表页，那么列表页应该显示第几页的数据呢？ 解决方案：（楼主的项目是vue+element）  携带参数 当页面跳转的时候，将页码等需要保存的数据，放在路由的参数中，传递到跳转页面，当完成后，最后回调回来，将参数带回来，初始化列表数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值