jqGrid中文文档.docx

jqGrid中文文档.docx

《jqGrid中文文档.docx》由会员分享，可在线阅读，更多相关《jqGrid中文文档.docx（140页珍藏版）》请在冰豆网上搜索。

jqGrid中文文档

Jqgrid3.6中文文档

jqGrid学习-----------原理2

jqGrid学习之---------皮肤2

jqGrid学习2

jQuery学习之：

jqGrid表格插件——参数配置4

jqGrid学习--------------自定义搜索14

jqGrid学习--------------搜索工具栏16

jqGrid学习--------------搜索17

jqGrid学习--------------自定义格式化类型19

jqGrid学习--------------格式化21

jqGrid学习--------------自定义按钮26

jqGrid学习--------------翻页

（2）28

jqGrid学习--------------翻页33

jqGrid学习--------------配置json35

jqGrid学习--------------方法37

jqGrid学习-----------事件45

jqGrid学习-----------数据48

jqGrid学习--------------ColModelAPI55

jqGrid学习-----------参数

（2）57

jqGrid学习------------------jqGrid参数63

jqGrid学习-----------------第一个实例63

使用jqGrid修改数据并检查69

jqGrid学习-----------原理

jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。

换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。

对于jqGrid我们所关心的就是：

必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。

jqGrid是用ajax来实现对请求与响应的处理。

∙

∙大小:

18.3KB

jqGrid学习之---------皮肤

jqGrid皮肤

从3.5版本开始，jqGrid完全支持jqueryUI的theme。

我们可以从

也并不需要把所有的css文件都引入进来，只需导入核心css文件“ui.theme.css”以及“ui.core.css”即可，文件位于目录development-bundle/themes下。

jqGrid学习

jqGrid学习之-------------安装

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

               +

                 listofalllanguagefiles

               +

                 ….

         o

           Changes.txt

         o

           jquery-1.3.2.min.js

         o

           jquery.jqGrid.min.js

目录结构如上。

在页面中写法：

Java代码

1.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

2.

//www.w3.org/1999/xhtml" xml:

lang="en" lang="en">  

3.  

4.  

5.  

6.   

7.  

8.  

9.  

10.   

11.  

18.   

19.  

20.  

21.   

22.  

23.  

24....  

25.  

26.  

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xml:

lang="en"lang="en">

...

需要说明的是，jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加上一段

style来指定页面上文字大小。

jQuery学习之：

jqGrid表格插件——参数配置

由于jqGrid功能强大，配置比较复杂，在第一个例子中，对于jqGrid的配置参数没有进行什么解释。

从现在开始，会陆续介绍jqGrid的参数。

这些参数的详细介绍请查看官方文档。

由于本人英语水平有限，翻译不好，请多原谅。

（为了保证连贯性，翻译时引用了，在此感谢。

但在他的基础上增加了一些内容。

）

上有很多jqGrid的API，大家可以查看。

在$（"#tableId"）.jqGrid（optional）;中，optional对象包含如下的属性：

（属性按字母顺序排列）

参数名称

参数类型

描述

默认值

是否可以被修改

ajaxGridOptions

object

对ajax参数进行全局设置，可以覆盖ajax事件：

error，complete和beforeSend

空值

是

ajaxGridOptions

object

对ajax参数进行全局设置

空值

是

ajaxSelectOptions

object

对ajax的select参数进行全局设置，设置editoptions跟searchoptions参数的select属性值

空值

是

altclass

String

用来指定行显示的css，可以编辑自己的css文件，只有当altRows设为ture时起作用

ui-priority-secondary

是，但需要重新加载

altRows

boolean

设置表格zebra-striped值

false

是，需重新加载

autoencode

boolean

当为ture时对url进行编码

false

是

autowidth

boolean

如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。

如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：

setGridWidth

false

否

caption

String

定义表格名称

空值

否，但是可以用api修改

cellLayout

integer

定义了单元格padding+border宽度。

通常不必修改此值。

初始值为5，paddingLef⇒2+paddingRight⇒2+borderLeft⇒1=5

5

否

cellEdit

boolean

启用或者禁用单元格编辑功能

false

是

cellsubmit

String

定义了单元格内容保存位置：

“remote”，“clientArray”

‘remote’

是

cellurl

String

单元格提交的url

空值

是

colModel

array

描述列信息的数组

空值

否

colNames

array[]

放置列名称的数组，必须与colModel大小相同

空数组

否

datastr

String

xmlstring或者jsonstring

空值

是

datatype

string

表格可以被接受的数据类型：

xml，xmlstring，json，local，function

xml

是

deselectAfterSort

boolean

只有当datatype为local时起作用。

当排序时不选择当前行

true

是

direction

string

表格中文字的显示方向，从左向右（ltr）或者从右向左（rtr）。

ltr

否

editurl

string

定义对form编辑时的url

空值

是

emptyrecords

string

当返回的数据行数为0时显示的信息。

只有当属性viewrecords设置为ture时起作用

在语言包中

是

ExpandColClick

boolean

当为true时，点击展开行的文本时，treeGrid就能展开或者收缩，不仅仅是点击图片

true

否

ExpandColumn

string

指定那列来展开treegrid，默认为第一列，只有在treeGrid为true时起作用

空值

否

footerrow

boolean

当为true时，会在翻页栏之上增加一行

false

否

forceFit

boolean

当为ture时，调整列宽度不会改变表格的宽度。

当shrinkToFit为false时，此属性会被忽略

false

否

gridstate

string

定义当前表格的状态：

'visible'or'hidden'

visible

否

gridview

boolean

构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中，但treeGrid,subGrid,orafterInsertRow不能用

false

是

height

mixed

表格高度，可以是数字，像素值或者百分比

150

否

hiddengrid

boolean

当为ture时，表格不会被显示，只显示表格的标题。

只有当点击显示表格的那个按钮时才会去初始化表格数据。

只有当caption属性不为空而且hidegrid为ture时才起作用

false

否

hidegrid

boolean

启用或者禁用控制表格显示、隐藏的按钮，只有当caption属性不为空时起效

true

否

hoverrows

boolean

当为false时mousehovering会被禁用

false

是

jsonReader

array

描述json数据格式的数组，

否

lastpage

integer

只读属性，定义了总页数

0

否

lastsort

integer

只读属性，定义了最后排序列的索引，从0开始

0

否

loadonce

boolean

如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用

false

否

loadtext

string

当请求或者排序时所显示的文字内容

Loading....

否

loadui

string

当执行ajax请求时要干什么。

disable禁用ajax执行提示；enable默认，当执行ajax请求时的提示；block启用Loading提示，但是阻止其他操作

enable

是

mtype

string

请求的类型：

（“POST”or“GET”）

GET

是

multikey

string

只有在multiselect设置为ture时起作用，定义使用那个key来做多选。

shiftKey，altKey，ctrlKey

空值

是

multiboxonly

boolean

只有当multiselect=true.起作用，当multiboxonly为ture时只有选择checkbox才会起作用，

false

是

multiselect

boolean

定义是否可以多选

false

否

multiselectWidth

integer

当multiselect为true时设置multiselect列宽度

20

否

page

integer

设置初始的页码

1

是

pager

mixed

指定分页栏对象，必须为一个有效的html元素。

可以是'pager','#pager',jQuery（'#pager'）.推荐用'#pager'

空值

否

pagerpos

string

指定分页栏的位置

center

否

pgbuttons

boolean

是否显示翻页按钮

true

否

pginput

boolean

是否显示跳转页面的输入框

true

否

pgtext

string

当前页信息

语言包中设置

是

prmNames

array

DefaultvaluesprmNames:

{page:

“page”,rows:

“rows”,sort:

“sidx”,order:

“sord”,search:

“_search”,nd:

“nd”,npage:

null}当参数为null时不会被发到服务器端

none

是

postData

array

此数组内容直接赋值到url上，参数类型：

{name1:

value1…}

空array

是

reccount

integer

只读属性，定义了grid中确切的行数。

通常情况下与records属性相同，但有一种情况例外，假如rowNum=15，但是从服务器端返回的记录数是20，那么records值是20，但reccount值仍然为15，而且表格中也只显示15条记录。

0

否

recordpos

string

定义了记录信息的位置：

left,center,right

right

否

records

integer

只读属性，定义了返回的记录数

none

否

recordtext

string

显示记录数信息。

{0}为记录数开始，{1}为记录数结束。

viewrecords为ture时才能起效，且总记录数大于0时才会显示此信息

语言包

是

resizeclass

string

定义一个class到一个列上用来显示列宽度调整时的效果

空值

否

rowList

array[]

一个数组用来调整表格显示的记录数，此参数值会替代rowNum参数值传给服务器端。

如果为空则不显示，设置格式：

[10,20,30]。

[]

否

rownumbers

boolean

如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。

此列名为'rn'.

false

否

rowNum

integer

设置表格中显示的记录数，参数会被自动传到后台。

如果此参数设为10，但是从服务器端返回15条记录，那么在表格中只会显示10条记录。

如果设为-1则禁用此检查

20

是

rownumWidth

integer

如果rownumbers为true，则可以设置column的宽度

25

否

savedRow

array

只读属性，只用在编辑模式下保存数据

空值

否

scroll

booleanorinteger

创建一个动态滚动的表格，当为true时，翻页栏被禁用，使用垂直滚动条加载数据，且在首次访问服务器端时将加载所有数据到客户端。

当此参数为数字时，表格只控制可见的几行，所有数据都在这几行中加载

false

否

scrollOffset

integer

设置垂直滚动条宽度

18

否

scrollrows

boolean

当为true时让所选择的行可见

false

是

selarrrow

array-[]

只读属性，用来存放当前选择的行

emptyarray[]

否

selrow

string

只读属性，最后选择行的id

null

否

shrinkToFit

boolean

此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。

如果为false，则列宽度使用colModel指定的宽度

true

否

sortable

boolean

是否可排序

false

否

sortname

string

排序列的名称，此参数会被传到后台

空字符串

是

sortorder

string

排序顺序，升序或者降序（ascordesc）

asc

是

subGrid

boolean

是否使用suggrid

false

否

subGridModel

array-[]

subgrid模型

emptyarray

否

subGridType

mixed

如果为空则使用表格的dataType

null

是

subGridUrl

string

加载subgrid数据的url，jqGrid会把每行的id值加到url中

空值

是

subGridWidth

integer

subgrid列的宽度

20

否

toolbar

array

表格的工具栏。

数组中有两个值，第一个为是否启用，第二个指定工具栏位置（相对于bodylayer），如：

[true,”both”]。

工具栏位置可选值：

“top”,”bottom”,“both”.如果工具栏在上面，则工具栏id为“t_”+表格id；如果在下面则为“tb_”+表格id；如果只有一个工具栏则为“t_”+表格id

[false,'']

否

totaltime

integer

只读属性，计算加载数据的时间。

目前支持xml跟json数据

0

否

treedatatype

mixed

数据类型，通常情况下与datatype相同，不会变

null

否

treeGrid

boolean

启用或者禁用treegrid模式

false

否

treeGridModel

string

treeGrid所使用的方法

nested

否

treeIcons

array

树的图标，默认值：

{plus:

'ui-icon-triangle-1-e',minus:

'ui-icon-triangle-1-s',leaf:

'ui-icon-radio-off'}

否

treeReader

array

扩展表格的colModel且加在colModel定义的后面

否

tree_root_level

numeric

root元素的级别，

0

否

url

string

url

null

是

userData

array

从request中取得的一些用户信息

emptyarray

否

userDataOnFooter

boolean

当为true时把userData放到底部，用法：

如果userData的值与colModel的值相同，那么此列就显示正确的值，如果不等那么此列就为空

false

是

viewrecords

boolean

是否要显示总记录数

false

否

viewsortcols

array

定义排序列的外观跟行为。

数据格式：

[false,'vertical',true].第一