jqGrid入门教程与安装指南

需积分: 10 60 浏览量更新于2024-07-29 收藏 531KB DOC 举报

"jqgrid手册是关于jQuery扩展插件jqGrid的学习资料，虽然不全面，但旨在帮助用户理解和使用该工具。jqGrid主要用于创建数据表格，适用于网页中的数据展示和管理。" jqGrid是一款功能强大的jQuery插件，专门用于构建动态、交互式的网格视图。它提供了丰富的功能，包括数据的加载、排序、筛选、分页、编辑以及行操作等，使得在网页上处理复杂数据变得简单。jqGrid支持JSON、XML、HTML等多种数据源格式，并且与AJAX无缝集成，可以实现异步数据加载。安装jqGrid时，你需要将相应的CSS和JS文件引入到你的项目中。根据提供的目录结构，你应该有以下文件： 1. `/myproject/css/` 目录下包含 `ui.jqgrid.css` 和第三方库 `jquery-ui-1.7.2.custom.css`，这些文件用于定义jqGrid的样式和主题。 2. `/myproject/js/` 目录下有 jqGrid 的核心文件 `jquery.jqGrid.min.js`，以及语言文件如 `grid.locale-bg.js`，用于支持不同语言。还有 `jquery-1.3.2.min.js`，即jQuery库本身。 3. `/myproject/js/i18n/` 目录包含了所有语言的文件，可以根据需要选择加载。 4. 其他文件如 `Changes.txt` 用于记录版本变更信息。在HTML页面中，你需要引入这些资源，并设置相应的CSS和JavaScript引用。示例代码如下： ```html <!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>MyFirstGrid</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.3.2.min.js" type="text/javascript"></script>  <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body>  </body> </html> ``` 完成上述设置后，你可以开始在HTML中创建jqGrid实例，通过JavaScript代码配置表格的各项属性，例如列定义、数据源、操作按钮等。jqGrid还提供了多种可定制的事件和方法，允许你自定义交互行为，例如点击行时触发特定函数，或者在数据加载前后执行某些操作。在实际应用中，你可能还需要了解如何使用服务器端脚本（如PHP、ASP.NET或Node.js）与jqGrid配合，处理数据的获取、更新和删除等操作。此外，jqGrid还支持自定义小图标、列排序方式、行选择模式、搜索过滤器等高级特性，使其成为开发复杂数据表单的理想工具。 jqGrid是一个功能强大的数据管理工具，它为网页开发者提供了一种简便的方式来展示、操作和管理大量的数据，而且具有高度的可定制性和扩展性。虽然这份手册可能并不全面，但它能引导初学者入门，进一步深入学习则需要结合更多的官方文档和示例来实践。

平放置；第三个参数指单击功

能，：单击列可排

序，!：单击图标排序。说

明：如果第三个参数为 ! 则第

一个参数必须为  否则不能排

序

<

 



如果设置则按此设置为主，如果没

有设置则按 7 中定义的宽

度计算



否

%= 

对 % 数据结构的描述否

四、 学习 $7M-2

$7是  里最重要的一个属性，设置表格列的属性。

用法：

ZA 代码

 WS3V3USF

 

& 7;PF;RRE%;R%RJEFJEQE

[ 

H JUB

属性数据类型备注默认值

 

定义单元格对齐方式；可选值：!E

E

!

 

设置列的 。多个  之间用空格分

隔，如：RR。表格默认的

 属性是 





! 

对日期列进行格式化。”KEKKEKK都

是有效的日期分隔符。E,E年 ,,E

月 E!E日

29*)

S,U

!A 

查询字段的默认值空

  

单元格是否可编辑

!

 

对列进行编辑时设置的一些属性





 

对于可编辑单元格的一些额外属性设置





 

可以编辑的类型。可选值：%E

%EED %E

<E E"

%

"% 

列宽度是否要固定不可变

!

! 

对于 ! 进行编辑时的属性设置



! 

对某些列进行格式化的设置





! %

对列进行格式化时设置的函数名或者类型



 

是否显示或者隐藏此列

!

 

在初始化表格时是否要隐藏此列

!

% 

当排序时定义排序字段名称的索引，参数

名为 %





 

定义了返回的  数据映射



D 

当从服务器端返回的数据中没有  时，将

此作为唯一 < 使用，默认只能有一个

 属性

!

  

如果 : 为空则用此值来作为列的

显示名称，如果都没有设置则使用 

值



 

必输项，表格列的名称，所有关键字，保

留字都不能作为名称使用包括  E



=

G  

是否可以被 G 



 

在搜索模式下，定义此列是否可以作为搜

索列









设置搜索参数



  

是否可排序



 

用在当  为  时，定义搜索列

的类型，可选值：对

 排序 \ 

排序数字 排序日期 %排序文本

%

 

定义搜索元素的类型

%

 

搜索数据时的 





<  

默认列的宽度，只能是象素值，不能是百

分比

H8

% 

定义当前列跟返回的 % 数据之间的映射

关系



! !

N!O单元格值



editrules:

jQuery("#grid_id").jqGrid({

...

colModel:

[

...

{name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },

...

]

...

});

</script>

Option Type Description

edithidd

boolean

这个功能只在 form eidting 下起作用，通常设置 hidden 的列是不可被

编辑的将此属性改为 true 即可在 form 里面被编辑

required boolean

(true or false) if set to true, the value will be checked and if empty, an

error message will be displayed.

number boolean

(true or false) if set to true, the value will be checked and if this is not a

number, an error message will be displayed.

integer boolean

(true or false) if set to true, the value will be checked and if this is not a

integer, an error message will be displayed.

minValu

number(int

eger)

if set, the value will be checked and if the value is less than this, an error

message will be displayed.

maxValu

number(int

eger)

if set, the value will be checked and if the value is more than this, an error

message will be displayed.

email boolean

if set to true, the value will be checked and if this is not valid e-mail, an

error message will be displayed

url boolean

if set to true, the value will be checked and if this is not valid url, an error

message will be displayed

date boolean

if set to true a value from datefmt option is get (if not set ISO date is used)

and the value will be checked and if this is not valid date, an error

message will be displayed

time boolean

if set to true, the value will be checked and if this is not valid time, an

error message will be displayed. Currently we support only hh:mm format

and optional am/pm at the end

custom boolean

if set to true allow definition of the custom checking rules via a custom

function. See below

custom_

func

function

this function should be used when a custom option is set to true.

Parameters passed to this function are the value, which should be checked

and the name - the property from colModel. The function should return

array with the following parameters: first parameter - true or false. The

value of true mean that the checking is successful false otherwise; the

second parameter have sense only if the first value is false and represent

the error message which will be displayed to the user. Typically this can

look like this [false,”Please enter valid value”]

Formoptions

jQuery("#grid_id").jqGrid({

剩余50页未读，继续阅读

Shine-R

粉丝: 0
资源: 7

jqGrid入门教程与安装指南

jqGrid手册教程一本通

Jqgrid使用手册

jqGrid使用手册

jqGrid 离线帮助手册

jqgrid ace 使用手册 技巧

jqGrid-wiki版手册

jqGrid 离线帮助手册 来源官方wiki

jqgrid的详细帮助手册(chm格式)

jqGrid组件

jqGrid API文档

最新资源

jqgrid ace 使用手册技巧

jqGrid 离线帮助手册来源官方wiki