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>

你可能感兴趣的:(jqGrid)