首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jqGrid 装配

2012-10-06 
jqGrid 安装Google下jqGrid download,当前的下载地址是:http://www.trirand.com/blog/?page_id6勾选所选

jqGrid 安装

Google下jqGrid download,当前的下载地址是:http://www.trirand.com/blog/?page_id=6

勾选所选的功能包,下载即可。

下载后的压缩包中有一个install的txt文件,说明了如何安装,十分简单。

前提条件是安装jQuery和jQuery UI。jqGrid是基于前两个开发的。

?

jqGrid安装很简单,只需把相应的css、js文件加入到页面中即可。 (不同于Ext,jqGrid的CSS和JS文件可以分开放置)
按照官网文档:?
??? *?
????? /myproject/css/?
????????? o?
??????????? ui.jqgrid.css?
????????? o?
??????????? /ui-lightness/?
??????????????? +?
????????????????? /images/?
??????????????? +?
????????????????? jquery-ui-1.7.2.custom.css?
??? *?
????? /myproject/js/?
????????? o?
??????????? /i18n/?
??????????????? +?
????????????????? grid.locale-bg.js?
??????????????? +?
????????????????? list of all language files?
??????????????? +?
????????????????? ….?
????????? o?
??????????? Changes.txt?
????????? o?
??????????? jquery-1.3.2.min.js?
????????? o?
??????????? jquery.jqGrid.min.js?

目录结构如上。?
在页面中写法:

Java代码??jqGrid 装配
  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="en"?lang="en">??
  3. <head>??
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
  5. <title>My?First?Grid</title>??
  6. ???
  7. <link?rel="stylesheet"?type="text/css"?media="screen"?href="css/ui-lightness/jquery-ui-1.7.1.custom.css"?/>??
  8. <link?rel="stylesheet"?type="text/css"?media="screen"?href="js/src/css/ui.jqgrid.css"?/>??
  9. <link?rel="stylesheet"?type="text/css"?media="screen"?href="js/src/css/jquery.searchFilter.css"?/>??
  10. ???
  11. <style>??
  12. html,?body?{??
  13. ????margin:?0;??
  14. ????padding:?0;??
  15. ????font-size:?75%;??
  16. }??
  17. </style>??
  18. ???
  19. <script?src="js/jquery-1.3.2.min.js"?type="text/javascript"></script>??
  20. <script?src="js/src/grid.loader.js"?type="text/javascript"></script>??
  21. ???
  22. </head>??
  23. <body>??
  24. ...??
  25. </body>??
  26. </html>??

需要说明的是,jquery-ui的字体大小与jqgrid字体大小不一致,故需要在页面上在加上一段?
style来指定页面上文字大小。

热点排行