jqgrid中分页和搜索,jqgrid loadonce:true后trigger("reloadGrid")无效
第一次接触jqgrid,发现项目中好多地方都用到。
jqgrid是典型的B/S架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示。
jqGrid是用ajax实现对请求和响应的处理,支持局部实时刷新。
在对数据进行table显示还是很方便的,只是里面的参数配置很多需要去了解一下。
1.需求
- 项目中一个table的分页有问题(jqGridPager)不能点击下一页进行跳转。
- 对该table下面的单子信息中的series等多个信息字段进行匹配查询操作

2.修改bug增加新业务
- 首先修改原来的table数据不能分页跳转问题,后台的接口都写好了(Oracle的分页by rownum)。主要是页面个page不能正确传递到后台。
增加loadonce:true属性.发现问题解决。(但为后面搜索功能留下坑)

- 增加新的搜索功能,针对这个搜索的业务还是有点绕的,可能是数据库设计不是很友好。
不是根据table中已有的字段属性进行匹配查询,需要进入单子里面的信息(一对多,而且数据在多张数据表中)
select tab.* from
(
select rownum rn, o.id npi2mpId,o.change_number npi2mpNumber, p2.text01 subject,
getuser(o.originator, 4) originator, o.create_date createDate
from obj_change o, obj_page_two p2,
(
select c.id mpid from obj_change c, OBJ_REV t
where t.text01 like '%W%' and t.text02 like '%W%' and t.text03 like '%WWWW2%'
and t.change_id = c.id
and t.numeric05 = 999
and c.category = 5
and c.delete_flag = 0
group by c.id
)r
where o.id =r.mpid and p2.id =r.mpid
and rownum <=10
)tab where rn >0
在这里又遇到一个问题,在使用distinct去重后rownum打乱了不能分页。想了一个办法通过group by去重再关联查询(当然这个问题还有其他很多解决方法)
将其装换为mybatis的xml配置
select tab.* from
(
select rownum rn, o.id npi2mpId,o.change_number npi2mpNumber,
p2.text01 subject, o.create_date createDate,
getuser(o.originator, 4) originator
from obj_change o, obj_page_two p2,
(
select c.id mpid from obj_change c, OBJ_REV t
where t.numeric05 = #{npi2mpRevFlag}
<if test="series != null and series != ''">
and upper(t.text01) like upper('%${series}%')
</if>
<if test="machineType != null and machineType != ''">
and upper(t.text02) like upper('%${machineType}%')
</if>
<if test="pcaPn != null and pcaPn != ''">
and upper(t.text03) like upper('%${pcaPn}%')
</if>
and c.category = 5
and t.change_id = c.id
and c.delete_flag = 0
group by c.id
)r
where o.id =r.mpid and p2.id =r.mpid
and rownum <=#{endNum}
)tab where rn ">>#{startNum}
这里使用${},也可使用#{},但要注意concat的oracle中只能连接两个值。
- 后台的接口写好了,重新回到页面jqgrid,添加新的方法。
_owner.reload = function(url, searchData) {
if (searchData == null) {
return;
}
_$jqGrid.jqGrid('setGridParam', {
postData : searchData,
url: url,
page: 1,
datatype:'json' //重新向服务器发送新的请求。
}).trigger("reloadGrid");
}
}
function reloadNPI2MPTable(url) {
var searchData = {};
$("form :input[name]").each(function(){
var value = $(this).val();
searchData[this.name] = value;
});
//console.log("npi2mp查询条件",searchData);
npi2mpTable.reload(url, searchData);
return;
}
这个遇到问题是jqgrid loadonce:true后trigger(“reloadGrid”)无效
- setGridParam中加上参数datatype:‘json’,重新向服务器发送新的请求。
例如:$("#grid").jqGrid().setGridParam({datatype:‘json’}).trigger(‘reloadGrid’);- 或者在jqGrid version 4.8之后,在trigger中加上参数fromServer:true,
例如:$("#list").trigger(“reloadGrid”, { fromServer: true, page: 1 });
- 改了jqgrid的参数属性后,测试功能。
jqgrid中分页和搜索,jqgrid loadonce:true后trigger("reloadGrid")无效的更多相关文章
- jqGrid中multiselect: true 操作checkbox
在jqGrid中设置multiselect: true可以实现全选的操作,但怎么设置被选中的checkbox里面的值呢,做法如下:jQuery("#listTable").jqGr ...
- 【APS.NET Core】- Razor Page 使用jqgrid实现分页功能
本文将使用jqgrid在Razor Page中实现分页功能. 前台 List.cshtml代码如下: @page @model ListModel @{ Layout = "~/Pages/ ...
- jqGrid中实现radiobutton的两种做法
http://blog.sina.com.cn/s/blog_4f925fc30102e27j.html jqGrid中实现radiobutton的两种做法 ------------------- ...
- jqGrid中多选
原文地址;http://www.cnblogs.com/josechuanmin/archive/2013/05/19/3087138.html 在jqGrid中设置multiselect: true ...
- 在前端页面对easyui中的datagrid与jqgrid加载后的数据进行操作
因为项目的需求,需要在grid中加载数据后再在前端页面执行操作,所以在easyui中的grid与jqgrid都进行了测试和操作: eayui中grid数据的操作: //构造集合对象 var list ...
- jqGrid中的formatter,表格中值的格式化
jqGrid中对列表cell数次那个格式话设置主要通过colModel中formatter,formatoptions来设置. 基本用法: jQuery("#jqGrid_id") ...
- jqGrid细节备注—jqGrid中自定义格式,URL格式
本文来自:http://cnn237111.blog.51cto.com/2359144/782137 jqGrid中自定义格式,URL格式 当官方自带的showlink用起来不是十分顺手,因此可以考 ...
- jqGrid中选择的行的数据[转]
如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridPa ...
- 如何获取jqGrid中选择的行的数据
原文地址:http://hi.baidu.com/feifan3211/item/c5831f44158761a5df2a9fc1 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id, ...
随机推荐
- 浅谈 vue-loader---合格前端
什么是 vue-loader? vue-loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件的格式撰写 Vue 组件. 如何使用? 1. 安装 npm install ...
- vue2.0嵌套组件之间的通信($refs,props,$emit)
vue的一大特色就是组件化,所以组件之间的数据交互是非常重要,而我们经常使用组件之间的通信的方法有:props,$refs和emit. 初识组件之间的通信的属性和方法 props的使用 子组件使用父组 ...
- badboy录制,出现弹框提示脚本错误解决方法
录制的时候经常出现如下问题: 结合网上一些资料,发现如下设置可以解决,具体原理不太清楚,但能达到效果(后期探究一下是为什么,如有知道的朋友,请赐教)
- ArcGIS Runtime SDK for Android中SimpleFillSymbol.Style样式
SimpleFillSymbol.Style样式枚举共8种: 1.BACKWARD_DIAGONAL 反对角线填充 2.CROSS 交叉线填充 3.DIAGONAL_CROSS 前后对角线填充 4.F ...
- 面向对象编程(什么是对象)——java
一.什么是面向对象,什么是面向过 二.引入对象和类的概念 对象:是具体事物 如:小明 汽车 类: 是对对象的抽象(抽象 抽出象的部分) Person 先有具体的对象,然后抽象各个对象之间的部分,归纳出 ...
- 【spring boot】SpringBoot初学(9.1)– 简单配置corsFilter对跨域请求支持
前言 只是简单的配置实现了cors,并没有讲任何东西.(有兴趣的可看: CORS 跨域 实现思路及相关解决方案) github: https://github.com/vergilyn/SpringB ...
- docker搭建环境积累
weblogic12搭建 sudo docker pull ismaleiva90/weblogic12 sudo docker run -d -p : -p : ismaleiva90/weblog ...
- 【笔记】机器学习 - 李宏毅 - 8 - Backpropagation
反向传播 反向传播主要用到是链式法则. 概念: 损失函数Loss Function是定义在单个训练样本上的,也就是一个样本的误差. 代价函数Cost Function是定义在整个训练集上的,也就是所有 ...
- win7安装SQL Server 2005 的问题总结
SQL Server 安装程序无法连接到数据库服务进行服务器配置. 错误为: [Microsoft][SQL Native Client]客户端不支持加密. 有关详细信息,请参阅服务器错误日志和安装日 ...
- ng-指令
在 Angular 中最常用的指令分为两种,它们分别是 属性型指令 和 结构型指令. NgClass 作用:添加或移除一组 CSS 类 NgStyle 作用:添加或移除一组 CSS 样式 NgMode ...