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}"
}