第一次接触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 &lt;=#{endNum}

		  )tab where rn ">&gt;#{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")无效

1.需求

2.修改bug增加新业务

最新文章

热门文章