easyUI分页中,如何实现页面跳转,再返回时,仍然到跳转前页数。(含页面显示条数)

easyUI中,分页情况下,跳转到其他页面修改数据,再返回时,相当于重新打开此页面,即显示第一页。 这样很不方便。故提出跳转回修改前的页面的需求。

通过网上搜索,了解到实现页面跳转回去的基本原理是:传递当前页码到另一页,然后另外一页接收页码值再传回到原页面。如果考虑页面显示条数的变动,也可以将页面显示条数值进行传递。

不过多废话,直接上源码,仅需在需更改的页面添加如下代码即可。

一、带有分页的页面:

1、取得当前分页的页码值和每页显示条数

当前分页的页码值

var grid= $('#dg'); //table的ID

var options =grid.datagrid('getPager').data("pagination").options;  
var thisPageNumber= options.pageNumber;  //获得当前页

当前每页显示条数

var grid= $('#dg'); //table的ID
var options = grid.datagrid('getPager').data("pagination").options;  
var thisPageSize = options.pageSize;  //获得当前页的单页显示数目


2、分页的页码值和每页显示条数,获得后用于设置当前页面显示

//分页传进去的参数
     $(function(){
var pg = "${pageNumber}";
var ps = "${pageSize}";
/*  */
if(pg!=null && pg!=''){
$("#dg").datagrid('getPager').pagination('refresh',{pageSize:ps});
}
if(ps!=null&&ps!=''){
$("#dg").datagrid('getPager').pagination('select',parseInt(pg));  (此处需注意用了parseInt的方法,如果不使用此方法,当跳转回来没有问题,但点击下一页时,回直接跳转到最后一页。具体原因可以参考一下:http://3y.uu456.com/bp_8w9fu2ahot2wkqq4m2mw_1.html)
}
})  

二、修改页面

在URL后边直接添加需要传递的参数"?pageNumber="+"${pageNumber}"+"&pageSize="+"${pageSize}"。

我的需要跳转到后台,相应的URL如下,'${pageContext.request.contextPath}/food/edit.do?commidityId='+commodityId+"&pageNumber="+"${pageNumber}"+"&pageSize="+"${pageSize}");。

只要添加如上信息,就可以搞定页面跳转显示问题了。

本人的项目采用SSM框架,从带有分页的页面跳转到修改页面和从修改页面返回到带有分页的页面,之间都通过后台的controller跳转,其中涉及到controller接收参数并继续向下传递参数,我仅仅是放在了request.setAttribute()中。另本人采用的是假分页,如采用真分页,请进行一定的修改。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用EasyUI端技术来实现一个简单的Windows资源管理器。以下是一个示例代码,展示了如何创建主页面和两个子页面,并实现页面之间的跳转。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Windows资源管理器</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/icon.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script> </head> <body> <div id="mainPage" class="easyui-layout" style="width:100%;height:100%;"> <div data-options="region:'west',split:true" style="width:200px;"> <ul id="treeMenu" class="easyui-tree"> <li> <span>文件夹1</span> <ul> <li><span onclick="openPage('页面1')">页面1</span></li> <li><span onclick="openPage('页面2')">页面2</span></li> </ul> </li> <li><span>文件夹2</span></li> </ul> </div> <div id="content" data-options="region:'center'" style="padding:10px;"> 欢迎使用Windows资源管理器! </div> </div> <script type="text/javascript"> $(function() { $('#treeMenu').tree(); }); function openPage(pageName) { $('#content').html('正在加载 ' + pageName + '...'); setTimeout(function() { $('#content').html(pageName + ' 加载完成!'); }, 1000); } </script> </body> </html> ``` 在上述代码,我们使用了EasyUI的布局组件来创建一个主页面(`mainPage`),其了一个左侧的树形菜单(`treeMenu`)和一个右侧的内容区域(`content`)。树形菜单有两个子菜单,分别对应两个页面页面1和页面2)。 当点击树形菜单的子菜单,会触发 `openPage` 函数,该函数会将选页面名称显示在内容区域,并模拟加载过程(这里使用了一个简单的延操作来模拟加载过程)。 你可以根据自己的需求修改页面布局和样式,并在 `openPage` 函数添加对页面的具体操作。这只是一个简单的示例,可以帮助你理解如何使用EasyUI实现页面之间的跳转

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值