第一次接触jqgrid,发现项目中好多地方都用到。

  jqgrid是典型的B/S架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示。

  jqGrid是用ajax实现对请求和响应的处理,支持局部实时刷新。

  在对数据进行table显示还是很方便的,只是里面的参数配置很多需要去了解一下。

1.需求

  1. 项目中一个table的分页有问题(jqGridPager)不能点击下一页进行跳转。
  2. 对该table下面的单子信息中的series等多个信息字段进行匹配查询操作

2.修改bug增加新业务

  1. 首先修改原来的table数据不能分页跳转问题,后台的接口都写好了(Oracle的分页by rownum)。主要是页面个page不能正确传递到后台。

      增加loadonce:true属性.发现问题解决。(但为后面搜索功能留下坑)

  2. 增加新的搜索功能,针对这个搜索的业务还是有点绕的,可能是数据库设计不是很友好。

    不是根据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 &lt;=#{endNum}
)tab where rn ">&gt;#{startNum}

这里使用${},也可使用#{},但要注意concat的oracle中只能连接两个值。

  1. 后台的接口写好了,重新回到页面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”)无效

  1. setGridParam中加上参数datatype:‘json’,重新向服务器发送新的请求。

    例如:$("#grid").jqGrid().setGridParam({datatype:‘json’}).trigger(‘reloadGrid’);
  2. 或者在jqGrid version 4.8之后,在trigger中加上参数fromServer:true,

    例如:$("#list").trigger(“reloadGrid”, { fromServer: true, page: 1 });
  1. 改了jqgrid的参数属性后,测试功能。

jqgrid中分页和搜索,jqgrid loadonce:true后trigger("reloadGrid")无效的更多相关文章

  1. jqGrid中multiselect: true 操作checkbox

    在jqGrid中设置multiselect: true可以实现全选的操作,但怎么设置被选中的checkbox里面的值呢,做法如下:jQuery("#listTable").jqGr ...

  2. 【APS.NET Core】- Razor Page 使用jqgrid实现分页功能

    本文将使用jqgrid在Razor Page中实现分页功能. 前台 List.cshtml代码如下: @page @model ListModel @{ Layout = "~/Pages/ ...

  3. jqGrid中实现radiobutton的两种做法

    http://blog.sina.com.cn/s/blog_4f925fc30102e27j.html   jqGrid中实现radiobutton的两种做法 ------------------- ...

  4. jqGrid中多选

    原文地址;http://www.cnblogs.com/josechuanmin/archive/2013/05/19/3087138.html 在jqGrid中设置multiselect: true ...

  5. 在前端页面对easyui中的datagrid与jqgrid加载后的数据进行操作

    因为项目的需求,需要在grid中加载数据后再在前端页面执行操作,所以在easyui中的grid与jqgrid都进行了测试和操作: eayui中grid数据的操作: //构造集合对象 var list ...

  6. jqGrid中的formatter,表格中值的格式化

    jqGrid中对列表cell数次那个格式话设置主要通过colModel中formatter,formatoptions来设置. 基本用法: jQuery("#jqGrid_id") ...

  7. jqGrid细节备注—jqGrid中自定义格式,URL格式

    本文来自:http://cnn237111.blog.51cto.com/2359144/782137 jqGrid中自定义格式,URL格式 当官方自带的showlink用起来不是十分顺手,因此可以考 ...

  8. jqGrid中选择的行的数据[转]

    如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridPa ...

  9. 如何获取jqGrid中选择的行的数据

    原文地址:http://hi.baidu.com/feifan3211/item/c5831f44158761a5df2a9fc1 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id, ...

随机推荐

  1. Linux报错:rm: cannot remove 'xxx': Is a directory

    rm: cannot remove 'xxx': Is a directory表示这个文件是无法remove移除的,因此我们不能仅使用rm来将这个文件夹进行删除,需要使用: rm -rf 命令则可以将 ...

  2. .netcore 3.1高性能微服务架构:封装调用外部服务的接口方法--HttpClient客户端思路分析

    众所周知,微服务架构是由一众微服务组成,项目中调用其他微服务接口更是常见的操作.为了便于调用外部接口,我们的常用思路一般都是封装一个外部接口的客户端,使用时候直接调用相应的方法.webservice或 ...

  3. 从零开始一个个人博客 by asp.net core and angular(一)

    这是一个个人叙述自己建设博客的帖子,既然是第一篇那肯定是不牵扯代码了,主要讲一下大体的东西,微软最新的web框架应该就数asp.net core 3.1了这是一个长期支持版,而且是跨平台又开源版本,所 ...

  4. 20200117 .net 001

    第一部分:面向对象 封装 继承(里氏转换) 多态第二部分:值类型.引用类型.字符串操作第三部分:集合文件操作第四部分:正则表达式第五部分:XML操作第六部分:委托.事件第七部分:反射. 1.变量的命名 ...

  5. Android在Activity中与Fragment中创建自定义菜单的区别

    区别就在这里,Activity中添加菜单要这样: public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R ...

  6. nodejs 使用 body-parser 获取网页内容

    var bodyParser = require('body-parser'); var urlencodedParser = bodyParser.urlencoded({ extended: fa ...

  7. MySQL概述及入门(二)

    MySql概述及入门(二) MySQL架构 逻辑架构图: 执行流程图: MySQL的存储引擎 查询数据库支持的存储引擎 执行: show engines: 多存储引擎是mysql有别于其他数据库的一大 ...

  8. 浅谈python的第三方库——pandas(三)

    令笔者对pandas印象最为深刻的一件事,就是在pandas中已经内置了很多数据导入导出方法,然而本人并不了解,在一次小项目的工作中曾手写了一个从excel表格导入数据到DataFrame的pytho ...

  9. P2055 [ZJOI2009]假期的宿舍【二分图/最大流】

    题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题. 比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C 与 A 不认识 ...

  10. 【新人赛】阿里云恶意程序检测 -- 实践记录11.10 - XGBoost学习 / 代码阅读、调参经验总结

    XGBoost学习: 集成学习将多个弱学习器结合起来,优势互补,可以达到强学习器的效果.要想得到最好的集成效果,这些弱学习器应当"好而不同". 根据个体学习器的生成方法,集成学习方 ...