第一次接觸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的參數屬性後,測試功能。