jqGrid 使用初步印象

jqGrid 使用初步印象

 

最近由於工作需要，在網上瞭解了幾種分頁的js外掛程式，初步選定 jqGrid。jqGrid 是 jQuery 外掛程式，功能比較齊全，增、刪、改、查、分頁、排序等操作的介面全部都有。當然了，背景 java 程式需要自己寫。

本來最初找到的是 Flexgrid，介面很漂亮，但是它不包含增、刪、改的介面，需要自己另寫，麻煩。Flexgrid 首頁上說計劃做，等它做好再評估吧。

 

jqGrid 使用可以簡化 Web 開發的介面編碼，可用於靜態頁面、各類動態網頁面，包括 php/jsp/asp。我們習慣於把所有錄入驗證都放在後台 java 代碼中做，因此整合起來相當順手。

 

需要注意的是，jqGrid 首頁是 http://www.trirand.com/blog/, 不是 http://www.trirand.com/，那是一個公司，掛羊頭賣狗肉。另 Flexgrid 首頁是 http://www.flexigrid.info/.

 

jqGrid 使用偏重於“定義”。也就是說，你希望你的頁面上，有幾列資料，每列多寬，什麼顏色，哪些列可編輯，等等，逐一寫好規則， jqGrid 自己會使用 javascript/css/html 動態產生一個頁面。好處自然是省去排版、並且介面風格一致。

 

jqGrid 前後台(HTML 為前台，php/jsp/servlet/asp 為後台)通訊，是頁面發送 HTTP request(POST/GET)，然後後台返回 xml/json/txt 之類的資料。

使用時 javascript 庫在頁面中順序是: jquery, jquery-ui, grid.locale-en.js, jquery.jqGrid.min.js, 例如:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

 

jqGrid 文檔不可下載。這點很讓人不爽。

 

以下是一些使用感受。

 

jqGrid 的 XML 格式通訊方式，在 ie8,chrome,safari 中都有問題，可能是我電腦中安裝的是 windows7 + ie8, 沒有安裝單獨的微軟 xml 解析器，也有可能是我沒有找到竅門。xml 格式在 firefox/opera 中正常。

json 格式則在 ie8/firefox/chrome/safari/opera 中都正常。

 

另一點需要說明，jqGrid 的查詢、翻頁使用 json/xml 作為回應，但是增、刪、改的回應則是可以自訂的，只需要在相應的 ajax 完成後的回呼函數 afterSubmit 中，寫明是成功還是失敗。比如:

return [true,'','created_new_data_id'];//成功時返回這個

return [false,'出錯了，xxx',''];//失敗時返回這個，出錯資訊可以從後台顯示到頁面。

 

這個在很多網上說明中，都沒有提到。而且，不寫回呼函數 afterSubmit ，預設是成功。

 

另一個比較妖的是，我需要在頁面最後寫：

 

jQuery.ajaxSetup({

dataType: "json"

});

 

意思是當前頁面所有用到 jQuery 的 Ajax 外掛程式的，都用 json 通訊資料格式。而 jqGrid 的文檔中根本沒有提到這一點。網上的資料也隻字不提。很奇怪。

 

我們使用 Apache Velocity 來替代 JSP ，這裡有一個 jqGrid json 資料格式例子，供大家參考：

1. 資料查詢用 velocity 模板

#set( $logic_page_index = ${pagingInfo.pageIndex} + 1 )

 

{

"page":"$logic_page_index",

"total":${pagingInfo.totalPageCount},

"records":"${pagingInfo.totalRecordCount}",

"rows":[

#foreach($rowData in ${rows})

{"id":"${rowData.key}","cell":[

#foreach($col in $rowData.cols)

"$!col"

#if($velocityCount < $rowData.cols.size())

,

#end

#end

]}

#if($velocityCount < $rows.size())

,

#end

#end 

 

 

]}

 

2. 資料增、刪、改所用 velocity 模板

{

"success_flag":"$success_flag",

"result_message":"${result_message}",

"new_id":"${new_id}"

}