jqGrid系列:安装使用jqGrid
jqGrid的安装分为基本安装和进阶安装。
基本安装:如果只是为了使用jqGrid,基本安装足够。如果还想要访问jqGrid源码调试,改善,在完成基本安装后,还需要进一步的设置才可以,这就是所谓的进阶安装。
基本安装:
step 1:为web项目创建两个文件夹。分别用于存放项目的样式文件和项目使用的脚本文件。在这里假设是css 和 js,css文件夹用于存放样式文件,js文件夹用于存放脚本文件。
step 2:解压缩jqGrid和jquery ui 样式文件。
step 3:将jqGrid中的css/ui.jqgrid.css 复制到css文件夹下
setp 4:将jquery ui 样式复制到css文件夹下
step 5:将jqGrid中的js/i18n文件夹,js/jquery.jqGrid.min.js和js/jquery-1.4.2.min.js复制到js文件夹下
step 6:创建HTML文件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body> ... </body> </html>
进阶安装
使用src文件夹下的未压缩js文件
step 1 :复制src文件夹到项目中的js文件夹
step 2:打开the grid.loader.js 文件,改变文件中的pathtojsfiles变量值为“js/src/”
step 3:改变js和css样式文件路径。如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/src/grid.loader.js" type="text/javascript"></script> </head> <body> ... </body> </html>