jqGrid选项配置
jqGrid选项配置属性默认从静态变量$.jgrid.defaults
中加载。英文版本的属性默认配置如下。本人下载的jqGrid4.4.0示例中暂时不支持中文语言的语言包,所以要配置为中文语言,只能通过重写下面表格列出的属性来实现。语言配置文件在demo目录js/i18n这个文件夹下,要改为其他语言加载对应的js语言配置文件即可。
$.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of {1}" }, //... }
下面选项配置表格最后一列是否能改变指的是这个参数配置在jqGrid创建后是否能修改。
配置项 | 类型 | 描述 | 默认值 | 能否改变 |
---|---|---|---|---|
ajaxGridOptions | object | jqGrid使用ajax请求数据时的全局配置。配置了这个对象可能会覆盖当前的jquery ajax配置,包括error,complete和beforeSend事件 | empty object | Yes |
ajaxSelectOptions | object |
用于配置editoptions 或者searchoptions配置中select对象通过dataUrl动态获取用的。 |
empty object | Yes |
altclass | string |
隔行显示的样式,只有当altRows参数设置为true时才起作用 |
ui-priority-secondary | Yes. Requires reload |
altRows | boolean | 是否隔行显示。说的白一些就是第一行显示白色背景,第二行蓝色背景,依次交替显示。 | false | Yes. After reload |
autoencode | boolean | 是否编码服务器返回内容或者提交到服务器的内容中包含的html代码,设置为true时,<会被编码为< | false | Yes |
autowidth | boolean |
设置为true时,将会重新计算表格相对于父元素的宽度。这个步骤只在表格建立是执行。如果建立之后表格父元素宽度改变,需要表格自动调整宽度,可以使用setGridWidth方法来实现 |
false | No |
caption | string | 表格的标题,显示在标题列中。如果配置为空,将不会显示标题。标题位置查看:jqGrid布局结构 | empty string | No.Method avail. |
cellLayout | integer | 单元格td(padding+border)宽度。一般不需要配置,但是如果修改过了表格的css文件,那么需要配置这个。初始值为paddingLef(2) + paddingRight (2) + borderLeft (1) = 5 | 5 | No |
cellEdit | boolean | 是否允许编辑单元格,查看jqGrid单元格编辑配置,事件及方法配置获得更多详细介绍。 | false | Yes |
cellsubmit | string | 配置单元格内容保存位置。可以为remote或者clientArray。查看jqGrid单元格编辑配置,事件及方法配置获得更多详细介绍。 | 'remote' | Yes |
cellurl | string | cellsubmit设置为remote时,将会提交修改的数据到这个页面进行保存,如执行保存到数据库之类的操作。 查看jqGrid单元格编辑配置,事件及方法配置获得更多详细介绍。 | null | Yes |
cmTemplate | object | 这里定义的属性覆盖默认的colModel配置值。如默认的colModel配置中列都是可以排序的,配置{sortable:false}后,那么所有的列都不可以排序,除非colModel中配置过sortable为true | null | No |
colModel | array | JSON数组对象描述列的参数。对于jqGrid来说很重要,具体配置查看:jqGrid colModel配置参数 | empty array | No |
colNames | array | 定义表头内容显示的字符串数组。注意此数组长度要和colModel配置的数组长度一致。标题位置查看:jqGrid布局结构 | empty array[] | No |
data | array |
传递给表格作为数据源的本地数组。可以直接指向一个已经定义的数组。 当数据量大并且关联时这个可以替代addRowData 方法。 |
empty array | Yes |
datastr | string | 当datatype设置为 xmlstring 或者 jsonstring时,对应的xml字符串或者json字符串 | null | Yes |
datatype | string |
定义填充表格的数据格式。可用类型: |
xml | Yes |
deepempty | boolean | 当事件或者一个插件作用于单元格时需要设置为true。此配置实用 jQuery empty作用于行和行的子元素.。会有速度开销,但是可以防止内存泄露。可排序的行或者列激活时也需要设置为true。 | false | Yes |
deselectAfterSort | boolean |
仅当datatype为local时适用。执行排序时取消选择已经选择的行 |
true | Yes |
direction | string |
定义表格中的文本方向(dir属性)。默认为 ltr (左到右)。当设置为rtl (右到左) 将会自动改变文字方向。一个页面上可能存在2个或者更多的表格,那么可以设置一个方向为ltr而另外一个为rtl。仅在Firefox 3+和ie6+支持。目前的safari,chrome和opera没有完全支持rtl方向。 默认firefox是不启用rtl方向的,需要修改firefox的配置文件才行【操作步骤:在地址栏输入about:config,点击确认进入配置窗口,在搜索栏输入layout.scrollbar.side,双击此项目,将0修改为1,确定完成firefox rtl方向开启】。 |
ltr | No |
editurl | string |
定义行编辑或者表单编辑时完成编辑后保存数据的动态页地址。可以设置为客户端数组(clientArray )然后手动提交数据到服务器。 参考:jqGrid行编辑配置 |
null | Yes |
emptyrecords | string |
当表格没有数据时显示的提示信息,仅当viewrecords 配置为true时有效。 |
see lang file | Yes |
ExpandColClick | boolean |
设置为true时,当我们点击展开列任意文本内容都会展开或者收缩树形控件(see treeGrid )),这样就不一定需要点击图标来实现展开收缩。 |
true | No |
ExpandColumn | string |
指定哪列(使用colModel配置的name)用户放置树形表格。如果不指定默认第一列。 仅当treeGrid 设置为 true .时可用 |
null | No |
footerrow | boolean | 设置为true将会在表格内容和导航之间插入一个包含一行的页脚表格,此行的列数和colModel配置的数量一致。 | false | No |
forceFit | boolean |
设置为true后,一列的宽度会改变,相邻的列(此列右边的列))将会重新调整,这样整体表格的宽度将维持原来的长度。 (例如,减少第二列的宽度30p那么第三列宽度将会增加30px).,这样就不会出现水平滚动条。注意:这个配置和shrinkToFit不兼容,如果 shrinkToFit 设置为 false, forceFit配置将会被忽略。 |
false | No |
gridstate | string |
确定表格状态(如当使用hiddengrid,hidegrid和caption配置),有 visible 或者 hidden 两种状态。 |
visible | No |
gridview | boolean | 在之前的版本包括3.4.X,读取大量关联数据(数量>= 100 ) 会产生效率问题。.产生这个问题的原因是每次插入单元格到表格中执行了5~6jquery 调用。现在问题解决了,我们用jQuery append一次插入整行数据,速度提升了3~5倍。一次插入所有数据会有什么结果? 设置为true的结果是速度提示5~10倍。当然,设置为true后,是有一些限制的,将不能使用treeGrid,subGrid和afterInsertRow事件,如果你不使用这3个配置可以设置为true,那么速度会大大提升。 | false | Yes |
grouping | boolean | 启用表格分组。更多详情查看: Grouping page. | false | Yes |
headertitles | boolean | 设置为true将会添加到表头的那title属性 | false | No |
height | mixed | 表格高度。可以为数字(单位px),百分比(只能设置为100%)或者auto。 | 150 | No.Method avail. |
hiddengrid | boolean | 设置为true初始化时将隐藏起来。数据不会加载(不发送请求),仅标题栏显示。当显示/隐藏按钮第一次被点击时显示表格,发送请求道服务器加载数据,表格显示。此配置仅当caption不为空并且hidegrid配置为true时有效。 | false | No |
hidegrid | boolean | 是否启用show/hide表格按钮。按钮显示在标题栏的最右边。 (jqGrid布局结构).。仅当caption属性不为空时有效。 | true | No |
hoverrows | boolean | 鼠标移动到数据行上时是否变换背景色 | true | Yes |
idPrefix | string | 设置了这个配置,将会给每行的id(tr的id)增加此前缀 | empty | Yes |
ignoreCase | boolean | 默认查询和排序是区分大小写的。如果查询或者排序不区分大小写可以设置为true | false | Yes |
inlineData | empty object | 行编辑时提交到服服务器的附加数据 | {} | Yes |
jsonReader | array | 配置对象描述需要的json数据源结构。更多详情查看: Retrieving Data JSON Data | No | |
lastpage | integer | 指定请求返回的总页数。如果datatype为函数,表格实例对象需要调用setGridParam({lastpage:数字}) 来指定最大页数 | 0 | No |
lastsort | integer | 只读属性。存储最后一次排序的列下标(从0开始) | 0 | No |
loadonce | boolean | 设置为true将会只从服务器获取一次数据。请求完毕后,datatype参数将会自动变为local,之后所有操作将会在客户端完成。pager配置的方法(如果配置过)将会被禁用。 | false | No |
loadtext | string | 加载数据时的等待信息。从语言文件中加载 | Loading… | No |
loadui | string | 这个配置控制ajax请求数据过程中要做什么。 disable - 禁用jqGridd进度指示器。这样你可以使用自己自定义的进度 enable (默认) -在jqGrid中间显示loadtext配置的信息 block -中间显示loadtext配置的信息,并且显示一个半透明遮盖层遮盖住整个表格,不允许对表格进行任何操作【如分页,排序得操作】直到ajax请求完成后会自动隐藏遮盖层和loadtext信息。 | enable | Yes |
mtype | string | 配置ajax发送请求的类型(POST或者GET) | GET | Yes |
multikey | string |
此配置仅当multiselect设置 为true时有效果。定义选择多条记录时需要按下的按键。 可用的值为:shiftKey , altKey, ctrlKey |
empty string | Yes |
multiboxonly | boolean |
此配置仅当multiselect设置 为true时有效果。 multiselect为 true,点击某行的任何地方都可以选择此行,但是 multiboxonly 设置为 true ,只有勾选checkbox 才会选中行,点击其他行非checkbox控件将会取消已经选择的行并且选中点击的行。 译者注:经测试,配置了multikey后,multiboxonly设置为true,当按住配置的multikey可以不必点击checkbox,点击行的其他地方也可以选择点击的行,并且不会取消已经选择过的行。 |
false | Yes |
multiselect | boolean |
配置为true后可以选择多行数据,并且每行最左边新增一列显示checkbox 。 |
false | No |
multiselectWidth | integer | 定义多选checkbox列的宽度,multiselect为true时有效 | 20 | No |
multiSort | boolean | 仅当datatype为local时有效,是否允许多重排序。sidx包含发送给服务器端排序的内容。.排序的字段 用逗号分隔,如“field1 asc, field2 desc …, fieldN”。注意最后的字段不包含asc 或者desc。设置为ture时通过sord参数获取 | false | Yes |
page | integer | 发送请求的初始化页数,发到到服务器以便检索返回数据使用 | 1 | Yes |
pager | mixed |
定义导航条显示容器。为一个有效的HTML元素,元素的id,或者元素jquery的id选择器,jQuery包转后的对象,如pager , #pager , jQuery('#pager'),建议传递 #pager。 See Pager |
empty string. |
No |
pagerpos | string |
定义导航内容所在位置。默认导航容器被分为3个部分,操作按钮,导航信息,记录信息,如下图。可用值:left,center,right |
center | No |
pgbuttons | boolean | 定义上一页,下一页4个如上图所示的箭头导航按钮是否显示。仅当pager配置设置对时可用。 | true | No |
pginput | boolean | 定义上图的“Page输入框 Of”是否显示 | true | No |
pgtext | string | 配置当前页信息,格式如“Page {0} of {1}” 第一个参数为当前页,第二个为总页数 | See lang file | Yes |
prmNames | array |
默认值为:{page:"page",rows:"rows", sort:"sidx", order:"sord", search:"_search", nd:"nd", id:"id", oper:"oper", editoper:"edit", addoper:"add", deloper:"del", subgridid:"id", npage:null, totalrows:"totalrows"} ,post提交到服务器。
例如,使用这个配置可以改变排序字段键名称从sidx修改为mysort.
|
none | Yes |
postData | array |
此配置将直接附加到url后面作为参数。格式为JSON对象,如 {name1:value1…} |
empty array | Yes |
reccount | integer |
只读属性。只是表格中显示的实际行数。不要和records弄混淆了,尽管一些情况下他们是一致的,但是有些情况下不是。例如, rowNum 设置为15,但是服务器返回了20条记录,records为20,但是reccount为15(表格只显示15条记录而不是20条) |
0 | No |
recordpos | string |
定义记录信息的文字的位置。如上图所示的“View 1-4 of 8”。可用值:left , center , right . |
right | No |
records | integer | 只读属性。指示服务器实际返回的数据量 | none | No |
recordtext | string |
导航条记录信息内容。总记录数大于0并且 viewrecords 设置为true才会显示。 格式如:View {0} - {1} of {2}。 {0} - 显示第一条数据记录号 {1} - 显示最后一条数据记录号 {2} - 服务器返回的总记录 |
see lang file | Yes |
resizeclass | string | 附加一个样式给列,这样只有附加了这个样式的列才可以改变 | empty string | No |
rowList | array[] |
select下拉导航可用的值,数字数组,如 [10,20,30] |
empty arrray | No |
rownumbers | boolean | 设置为true将在表格左边新增一列,显示行号,从1开始。设置为true后colModel将会自动增加一个name为rn的新元素,所以配置colModel时不要配置某列name值为rn。 | false | No |
rowNum | integer | 设置表格要显示多少条记录。此参数将会传递到服务器以便获取检索返回需要的数据。注意:如果设置为10,但是服务器返回15条记录,那么只有10条记录被加载到表格中 | 20 | Yes |
rowTotal | integer |
设置这个参数提供给服务器需要加载多少条数据。注意rowNum指示多少条记录显示在表格内,而 rowTotal指示我们可以操作的总记录数。设置这个值后一个附加的参数totalrows将会发送到服务器。服务器端可以检查这个值是否可用,以便使用这个值替换掉rows参数 。通通常这个参数可以联合loadonce被设置为true。 |
null | Yes |
rownumWidth | integer | 设置行号的宽度,仅当rownumbers设置为true | 25 | No |
savedRow | array | 只读属性,用于存储在行和单元格被编辑之前的原始数据。 查看:jqGrid单元格编辑配置,事件及方法 ,jqGrid行编辑配置 | empty array | No |
|
|
|
|
|
scroll | boolean or integer | 创建动态滚动表格。配置了此项后导航容器被禁用,可以通过水平滚动条来加载数据。 设为true表格将保留所有项目从开始的到最近访问的。设置为数字(如1),表格仅保留可见的行。这样我们只加载部分数据而不用担心内存泄露。附加的参数npage将会发往服务器,如果设置了npage,表格有些时候会后会请求超过1页以上的数据。如果没配置npage,将会发送多个get请求。 | false | No |
scrollOffset | integer | 设置垂直滚动条的宽度。不同的浏览器垂直滚动条宽度不一样(很难在所有浏览器下计算),可变的。 | 18 | No.Method avail. |
scrollTimeout | integer (milliseconds) | 控制滚动事件延时时间当scroll配置为1。 | 200 | Yes |
scrollrows | boolean | 设置为true时,通过setSelection选中某行将会滚动表格使选中的行可见。表格有水平滚动条,当使用表格编辑,通过上一条或者吓一跳导航按钮导向时将会很有用。 | false | Yes |
selarrrow | array | 只读属性,存储当前选中的行。为一维数组,存储选中的行的id。 | empty array [] | No |
selrow | string | 只读属性,包含最后一次选中的行的id。如果排序或者分页过,将会设置为null | null | No |
shrinkToFit | boolean or integer | 设置了此配置,将会参考每列配置的列宽,对列宽进行重新计算。 1)设置为true,列的宽度也设置过,将会依据配置的列宽进行缩放。如我们定义2列宽度分别为80和120px,但是表格宽度为300px,那么列宽将会变宽以便填充整个表格,增加的额外宽度依据他们的配置的宽度来计算,计算方法如下 第一列实际宽度为:(300/(80+120)(原来配置列宽总和))*80(第一列的宽度) = 120 第二列实际宽度为:(300/(80+120)(原来配置列宽总和))*120(s第二列的宽度) = 180 新的列宽总和为300px,和表格总宽度一样。 2)如果设置为false并且配置jqGrid的width参数,列宽将不会改变,如1)的例子,列一宽度为80,列二维120,表格总宽度300保持不变。 3)设置为一个数字,列宽将会依据此数字重新计算。(the width is calculated according to it. - The effect of using an integer can be elaborated.) | true | No |
sortable | boolean |
设置为true,允许通过鼠标拖拽重新对列进行排序。这个选项依赖 jQuery UI sortable部件,所以需要在head标签内容加载sortable部件。所以下载jqGrid时需要选择jQuery UI扩展选项如果你需要此功能。注意: colModel配置中也有一个配置为sortable,这个指示此列是否允许点击列表头进行排序。 |
false | No |
sortname | string | 当加载服务器xml或者json数据需要依据那列进行排序,此配置作为参数附加到url中。设置了这个值并且和colModel配置的index一致,对应的列表头将会增加一个图标指示表格已经通过此列排序过。此图标也指示了是那种排序,升序或者降序,参考sortorder对象。 | empty string | Yes |
sortorder | string |
从服务器获取xml或者json数据的初始化排序方向(降序或者升序)。附加到url参数中,可选值:asc 或者 desc . |
asc | Yes |
subGrid | boolean | 是否启用subGrid。设置为true,在表格左边会增加一列。这列包含一个+号图片,用户可以点击这个图片展开这行,默认所有行是收缩的。 详细查看: Subgrid | false | No |
subGridOptions | object | subGrid相关配置,详细查看:Subgrid. | see Subgrid | Yes |
subGridModel | array-[] |
描述subGrid的colModel模型,仅当subGrid设置为true有效。 详细查看: Subgrid |
empty array | No |
subGridType | mixed | subGrid数据源类型,如果没有设置,将启用父表格配置datatype | null | Yes |
subGridUrl | string |
subGrid设置为 true时有效。配置subgrid从哪个页面加载数据。 jqGrid会将此行的id作为参数附加到url上。如果需要附加额外参数,配置subGridModel中的params选项。 详细查看: Subgrid |
empty string | Yes |
subGridWidth | integer |
subGrid设置为 true时有效,定义subGrid的宽度。 |
20 | No |
toolbar | array |
定义表格工具栏。为2个值的数组。第一个值定义是否启用工具栏,第二个值定义工具栏相对于表格内容的位置,可用值有:t |
[false, ''] | No |
toppager | boolean | 设置为true,导航条将放置在表格顶部,标题栏下(如果存在)。如果定义了pager, 2个都会显示并且内容同步更新。此导航条id为选择器id(不包含#)_toppager | false | No |
totaltime | integer | 只读属性,指示记录加载的时间。加载xml或者json数据时可用。计算方式为请求结束到最后一行数据添加到表格。 | 0 | No |
treedatatype | mixed |
树形表格数据源类型,详细参考 datatype。通常不需要修改这个。在处理过程中这个等介于datatype |
null | No |
treeGrid | boolean | 允许treegrid数据格式,详细查看: Tree Grid | false | No |
treeGridModel | string |
指定treeGrid的方法,可用值有:nested或者 adjacency . 详细查看: Tree Grid |
nested | No |
treeIcons | array |
此对象指定treegrid使用的图标。图标名称需要是UI主题中定义过的。默认值为 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} |
No | |
treeReader | array |
扩展grid配置中的 |
No | |
tree_root_level | numeric | 当treeGrid为true时指定根元素从哪层开始。 | 0 | No |
url | string |
jqGrid数据源url地址。可以设置为clientArray (客户端数据)手动发送数据到服务器。 参考:jqGrid行编辑配置 |
null | Yes |
userData | array | 保存请求的自定义信息,以便随时使用 | empty array | No |
userDataOnFooter | boolean | 设置为true,将直接放置userData数据到页脚。规则如下 如果userData中包含的name和colModel中配置的任何一个name一致,数据将会显示在此列中。 如果不包含任何值将不会放置。 | false | Yes |
viewrecords | boolean |
是否在导航条显示显示recordtext/emptyrecords 配置的信息。 |
false | No |
viewsortcols | array |
定义表头排序图标的外观和行为(up/down箭头),默认值为 viewsortcols : [false,'vertical',true] . 1)第一个值定义排序图标是否在在所有可排序的列的表头中显示,设置为true可以让用户知道此列可以进行排序,默认值为false,只有当此列表头为最后一次排序时被点击才会显示.图标。设置为true所有可排序的列表头都会显示图标 2)第二个定义图标的位置。vertical为垂直放置 horizontal:水平放置![]() |
[false,'vertical',true] | No |
width | number |
表格宽度。未设置那么长度为colModel配置的所有列总和.设置了这个值,colModel配置的实际宽度将依据shrinkToFit 配置和配置的初始化宽度值。 |
none | No. Method avail. |
xmlReader | array | 配置对象描述需要的xml数据结构。详细参考:jqGrid XML数据源读取器选项配置 | No |
如果你希望修改一些默认值并且作为表格的通用对象,可以使用jQuery的extend方法扩展默认配置。
假设你希望表格如斑马线(隔行换色)一样,并且所有的表格都有这个效果而不用每次都需要配置altRows属性,下面为一个示例扩展默认的jqGrid配置altRows来实现。
<!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" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <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" /> <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/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> // Here we set the altRows option globally jQuery.extend(jQuery.jgrid.defaults, { altRows:true }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url:'example.php', ...
你可以修改更多的默认配置。
在上个示例中,提到了如何将修改默认属性作用于所有的表格。某些情况下你可以单独配置jqGrid的某些项目覆盖全局的设置。
如下,全部配置altRows被设置为true,如果不希望隔行换色,可以另外配置altRows:false覆盖全局的配置。
<!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" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <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" /> <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/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> // Here we set the altRows option globallly jQuery.extend(jQuery.jgrid.defaults, { altRows:true }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url:'example.php', // here we do not want zebra for this grid altRows: false, ...
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jqGrid选项配置