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>
easyui分页,编辑datagrid某条数据保存以后跳转到某一页的更多相关文章
- easyui datagrid 每条数据后添加操作按钮
easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...
- EasyUI + ajax + treegrid/datagrid 接收 json 数据,显示树状/网状表结构
最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...
- easyui自定义标签 datagrid edit combobox 手动输入保存不上问题解决办法
使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column ...
- JAVA从文本文件(txt)读取一百万条数据保存到数据库
Java读取大文本文件保存到数据库 1.追求效率 将文件读取到内存,效率比较高,经过测试读取1G左右的文本文件,机器内存消耗达到接近3个G,对内存消耗太大,不建议使用 2.通过调用第三方类库实现 通过 ...
- 项目中多条数据保存的json实例
//js代码function checkCode(num){ var typeid = $("#typeid").val(); if(typeid == "") ...
- mysql中造3千条数据(3种方法)
方法一:存储过程 1.存储过程如下: delimiter $$ DROP PROCEDURE IF EXISTS data CREATE PROCEDURE data(in i int) BEGIN ...
- sql查询第10条到第20条数据
select top(10) * from T1 where Id >= (select MAX(Id) from (select top(20) * from T1 order by Id) ...
- jquery easyui datagrid 多选只能获取一条数据
DataGrid属性: singleSelect ------如果为true,则只允许选择一行: idField ------- 指明哪一个字段是标识字段: 方法: 一:getSelections-- ...
- jQuery EasyUI编辑DataGrid用combobox实现多级联动
我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascrip ...
随机推荐
- Java中的sun.misc.Unsafe包
chronicle项目:https://github.com/peter-lawrey/Java-Chronicle 这个项目是利用mmap机制来实现高效的读写数据,号称每秒写入5到20百万条数据. ...
- 看不懂深度Linux系统的文件管理器图标
为了保持对Linux的熟悉度,MacBookPro一般放在公司,家里(每次用这个词是我觉得最纠结的时候,我现在有家吗?)用的是普通笔记本装了深度Linux. 之所以安装深度,主要的原因应该是支持国产吧 ...
- GODOT 3.0 开发进度汇报 #6
经过了又一个月的开发工作,在此作进度报告.本月的工作可以划分为:完成Web导出工具开发.GDNative.以及新的粒子系统. Web Export Godot 现在有了一款实验性的导出工具,导出目标为 ...
- Android——黑名单管理(二)
说明:多加一点完善 1.在操作类 DAO 将连接数据库也放到了构造方法中(错误),加删除全部的方法 2.主界面增加了姓名一栏,用layout文件将对话框分离出来 3.删除加确认提示 4.加删除全部按钮 ...
- 【进阶修炼】——改善C#程序质量(7)
113,声明变量时考虑最大值. Ushort的最大值是65535,用于不同的用途这个变量可能发生溢出,所以设计时应充分了解每个变量的最大值. 114,MD5不再安全. MD5多用于信息完整性的校验.R ...
- .net类中静态方法的继承
父类中的静态方法,继承的子类能不能调用?一直在这里有疑惑,即使在下面的测试之后,也只是得到了结论,不明原理. class ClsParent { public static void ShowSth( ...
- 大数据处理-Bitmap
MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)" Bit-map空间压缩和快速排序去 ...
- 【C】——使用creat()函数需要注意的事项
#include<fcntl.h> int creat(const char *pathname, mode_t mode); 若成功则返回为只写打开的文件描述符,若出错则返回-1: 有时 ...
- Spring Cloud / Spring Boot There was an unexpected error (type=Unauthorized, status=401). Full authentication is required to access this resource.
访问EndPoint时会出现没有权限 There was an unexpected error (type=Unauthorized, status=401). Full authenticat ...
- Entity Framework Code First - Change Tracking
In this post we will be discussing about change tracking feature of Entity Framework Code First. Cha ...