jqGrid中文教程Word文件下载.docx
《jqGrid中文教程Word文件下载.docx》由会员分享，可在线阅读，更多相关《jqGrid中文教程Word文件下载.docx（134页珍藏版）》请在冰点文库上搜索。
jquery.searchFilter.css
grid.base.js
grid.celledit.js
mon.js
grid.custom.js
grid.formedit.js
grid.import.js
grid.inlinedit.js
grid.loader.js
grid.postext.js
grid.setcolumns.js
grid.subgrid.js
grid.tbltogrid.js
grid.treegrid.js
jqDnR.js
jqModal.js
jquery.fmatter.js
jquery.searchFilter.js
json2.js
JsonXml.js
从文件结构上看，jqGrid需要的文件在/css/和/js/目录中，这些文件已被简化用于运行环境。
此包中还包含了基本jQuery库，你不需要再去下载jQuery库。
/src/目录中的文件为源代码，供开发人员修改和改进，为了不使用基本版本，需使用grid.loader.js，参见“安装”
下载UI主题
从jqGrid3.5版开始，jqGrid完全兼容UI主题。
为此，你需要下载所需的主题。
主题可从jQueryUI站点
更新日志（略）
这部分介绍了新版本修改的错误和增加的功能
安装
这节介绍安装步骤和技巧。
假设你机器上已安装了一个web服务器。
基本安装
解压jqGrid和UI主题压缩文件到一个临时文件夹中；
在web服务器上创建可访问的项目目录（如myproject）；
在myproject目录下创建js和css两个目录；
将jqGrid包中css目录（非src/css）下的ui-jqgrid.css复制到myproject的css目录下；
将jqGrid包中js目录下的所有目录和文件复制到myproject的js目录下；
将UI主题包中css目录下的所有目录和文件复制到myproject的css目录下；
以上操作后，你服务器中的目录结构应该是：
/myproject/css/
ui.jqgrid.css
/ui-lightness/
/images/
jquery-ui-1.7.2.custom.css
/myproject/js/
使用你喜欢的编辑器在myproject目录下创建myfirstgrid.html文件，输入以下代码：
viewplaincopytoclipboardprint?
1.<
!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Strict//EN"
2.
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
3.<
xmlns="
//www.w3.org/1999/xhtml"
xml:
lang="
en"
4.<
head>
5.<
meta
http-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
6.<
title>
My
First
Grid<
/title>
7.<
link
rel="
stylesheet"
type="
text/css"
media="
screen"
8.
href="
css/ui-lightness/jquery-ui-1.7.1.custom.css"
9.<
css/ui.jqgrid.css"
mce_href="
10.<
mce:
script
src="
js/jquery-1.3.2.min.js"
mce_src="
text/javascript"
<
/mce:
script>
11.<
—语言的js文件应该在jqGrid的js文件前装入-->
12.<
js/i18n/grid.locale-en.js"
13.<
js/jquery.jqGrid.min.js"
14.<
/head>
15.<
body>
/body>
/html>
至此，你已构建了你的第一个jqGrid。
开发安装
目录结构与前面相同，将jqGrid包中的整个src目录复制到js目录下。
结构如下：
打开grid.loader.js文件，修改pathtojsfiles为js/src/，代码如下：
1.function
jqGridInclude（）{
var
pathtojsfiles
=
js/src/"
;
//
需要修改的地方
3.
如果不需要某些模块，将include设为false
4.
modules
[
5.
{
include:
true,
incfile:
'
i18n/grid.locale-en.js'
},
jqGrid
translation
6.
grid.base.js'
base
7.
mon.js'
common
for
editing
grid.formedit.js'
Form
9.
grid.inlinedit.js'
inline
10.
grid.celledit.js'
cell
11.
grid.subgrid.js'
//jqGrid
subgrid
12.
grid.treegrid.js'
treegrid
13.
grid.custom.js'
custom
14.
grid.postext.js'
postext
15.
grid.tbltogrid.js'
table
to
grid
16.
grid.setcolumns.js'
setcolumns
17.
grid.import.js'
import
18.
jquery.fmatter.js'
formater
19.
JsonXml.js'
//xmljson
utils
20.
jquery.searchFilter.js'
}
search
Plugin
21.
];
22.
filename;
23.
for（var
i=0;
i<
modules.length;
i++）
24.
if（modules[i].include
===
true）
25.
filename
pathtojsfiles+modules[i].incfile;
26.
if（jQuery.browser.safari）
27.
jQuery.ajax（{
url:
filename,dataType:
script'
28.async:
false,cache:
true}）;
29.
else
30.
IncludeJavaScript（filename）;
31.
32.
33.
34.
function
IncludeJavaScript（jsFile）
35.
oHead
document.getElementsByTagName（'
head'
）[0];
36.
oScript
document.createElement（'
）;
37.
oScript.type
text/javascript'
38.
oScript.charset
utf-8'
39.
oScript.src
jsFile;
40.
oHead.appendChild（oScript）;
41.
};
42.};
43.jqGridInclude（）;
你的HTML文件如下
8.href="
js/src/css/ui.jqgrid.css"
11.href="
js/src/css/jquery.searchFilter.css"
style>
--
13.html,
body
margin:
0;
padding:
font-size:
75%;
14.-->
style
mce_bogus="
1"
html,
}<
/style>
16.<
js/src/grid.loader.js"
17.<
18.<
19.<
20.<
至此，你已准备好调试和改进jqGrid。
如何使用
了解本节将帮助你更好地使用jqGrid和组件的全部功能。
我们首先必须知道我们有两个部分：
服务器端操作和客户端呈现。
换句话说：
jqGrid是一个组件，使我们能用简单的方法在客户端使用服务器端技术呈现数据库信息并将对数据的操作返回给数据库。
什么是服务器端操作（SSM）?
可能有很多定义，我试图从jqGrid角度来解释。
基本的SSM的意思是服务器端的编辑处理而不是用户浏览器。
SSM不是在页面上可见的。
一切都是在服务器上用一些通用的编程语言做的。
基本上它是服务器上的命令，告诉服务器一旦用户调用，把文件或文本放置到页面上。
从jqGrid角度你应该关心的是：
你必须有一段代码使用脚本语言和web服务器来处理存储在数据库中信息。
使用这段代码你应能返回请求的信息给客户（web浏览器）。
jqGrid使用Ajax请求取得请求的信息并使用JavaScript处理给客户。
有了需要的信息，你可通过列模型（colModel）描述jqGrid要构造的表格数据。
客户端要构造的表格数据有：
Captionlayer（标题区）Headerlayer（表头区）Bodylayer（表体区）Navigationlayer（导航区）
Captionlayer包含表格的公共信息。
Headerlayer包含列信息：
标签，宽度等。
Bodylayer是从服务器取得的数据并按列模式定义显示。
Navigationlayer包含得到的其他信息和请求片段信息的分页。
navigationlayer不仅可以放置在表格的底部，而且可放置在页面的任何地方。
Navigationlayer还是添加编辑、删除新增按钮或链接和搜索表格数据的地方。
表格至少包括Headerlayer和Bodylayer.
为允许自由和灵活性，以及较好的样式，jqGrid依靠CSS管理它的外观。
2、jqGrid3.6.2中文文档——安装jqGrid
（2）收藏
我的第一个表格
作为本教程一个例子将提供整个文档，我们将创建一个有关发票信息的表格。
首先我们需要定义在客户端显示数据：
Invid发票号码
Invdate发票日期
amount发票金额
tax税
total金额总数（含税）
note备注
数据
我们需要以下格式的表格（本例基于MySQL），可按以下方式创建：
1.CREATE
TABLE
invheader
（
invid
int（11）
NOT
NULL
AUTO_INCREMENT,
invdate
date
NULL,
client_id
amount
decimal（10,2）
DEFAULT
0.00'
tax
total
note
char（100）
PRIMARY
KEY
（invid）
然后输入数据。
HTML文件
使用我们安装时建立的文件myfirstgrid.html
11.html,
12.-->
1
升级会员 