jqGrid 使用初步印象

2010-08-05 15:37

 

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

}

 		

 

 

欢迎转载,转载请注明出处: https://www.zheguisoft.com/staff_blogs/jacklondon_chen/2010, 及 https://blog.csdn.net/jacklondon/article/details/5790800?spm=1001.2014.3001.5501