jqGrid提供了大量的选项设置,开发者可以通过设置选项对应值来控制jqGrid,比如表格的宽度、高度、数据类型以及列名称等等都是通过选项
设置来完成的。jqGrid的选项一般是名称:值(name:value)的形式,也可以是对象(object)及数组(array)的形式配置。
属性 |
类型 |
描述 |
默认值 |
ajaxGridOptions |
object |
此项用于设置当表格设置获得数据时,ajax的全局属性,注意此项可能覆盖所有当前的ajax设置(包括error, complete和beforeSend 事件)。 |
empty |
ajaxSelectOptions |
object |
此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时, ajax的全局属性。 |
empty |
altclass |
string |
交替行的类。 此项仅当altRows设置为true时有效。 |
ui-priority-secondary |
altRows |
boolean |
设置为交替行表格 |
false |
autoencode |
boolean |
当设置为true时,对来自服务器的数据和提交数据进行encodes编码。如< 将被转换为< |
false |
autowidth |
boolean |
当设置为true时,表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行,为了使表格在父元素宽度变化时也随之变化,可以使用setGridWidth方法 |
false |
caption |
string |
表格的标题。显示在Header上。若为空时将不会显示。 |
empty |
cellLayout |
integer |
该属性确定单元格的padding + border 宽度。通常不修改该属性,但若表格的CSS中改变了td元素,该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5 |
5 |
cellEdit |
boolean |
是否允许单元格编辑。 |
false |
cellsubmit |
string |
确定单元格内容保存方式是remote还是clientArray 。 |
'remote' |
cellurl |
string |
单元格保存的url。 |
null |
colModel |
array |
描述列参数数组。这是表格最重要的部分,详见colModel API
. |
null |
colNames |
array[] |
列名称数组。该名称将在Header中显示。名称以逗号分隔,数量应与colModel 数组数量相等 |
empty |
data |
array |
以数组的形式保存本地数据。 |
empty |
datastr |
string |
当datatype被设置为xmlstring或jsonstring时,为数据串。 |
null |
datatype |
string |
定义表格希望获得的数据的类型,有效值有:
Xml —xml数据
xmlstring—xml字符串
json—JSON数据
jsonstring—JSON字符串
local—客户端数据(数组)
javascript—javascript数据
function—函数返回数据
|
xml |
deselectAfterSort |
boolean |
只适用于当datatype为local时。当一个排序被应用时取消当前选定行。 |
true |
direction |
string |
表格中的书写方向。“ltr”从左到右(缺省值),“rtl”从右到左 |
ltr |
editurl |
string |
定义行内编辑地址URL |
null |
emptyrecords |
string |
当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。 |
|
ExpandColClick |
boolean |
true时,点击展开行的文字,treeGrid展开或收拢 |
true |
ExpandColumn |
string |
指定用于张开treeGrid的列(名称来自colModel),未设置即用第一列。此项只有当treeGrid为true时有效. |
null |
footerrow |
boolean |
如果设置为true时,将生成一个表脚行,列数等于colModel |
false |
forceFit |
boolean |
如果设置为true,改变列宽,相邻列也将调整以适应整体表格,将不会出现水平滚动条。 |
false |
gridstate |
string |
表格的当前状态。有visible或hidden |
visible |
gridview |
boolean |
设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件 |
false |
grouping |
boolean |
是否设置表格组 |
false |
height |
mixed |
表格高度。可为数值、百分比或auto |
150 |
hiddengrid |
boolean |
如果设置为true,表格开始被隐藏,数据不被载入,只显示标题。当第一次点击显示/隐藏按钮显示表格,数据从服务器载入。 |
false |
hidegrid |
boolean |
是否允许显示/隐藏按钮可用。只有标题不为空时可用。 |
true |
hoverrows |
boolean |
表行是否有鼠标悬停效果 |
true |
jsonReader |
array |
JSON数据结构数组 |
|
lastpage |
integer |
请求返回的总页数 |
0 |
lastsort |
integer |
排序的列号(0开始) |
0 |
loadonce |
boolean |
设置为true时,表格只一次读取服务器数据(使用适当datatype),之后,datatype 自动变为local ,所有进一步操作都在客户端完成,pager功能(若存在)将失效。 |
false |
loadtext |
string |
数据请求和排序时显示的文本 |
Loading… |
loadui |
string |
此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示,可使用自定义的指示。 enable (缺省)—表格中间显示loading。 block – 显示“Loading”信息,禁用页面上的所有功能,直到数据装入完成。 |
enable |
mtype |
string |
定义提交类型POST或GET |
GET |
multikey |
string |
此属性只有当multiselect为true时有效,定义多选时的组合键,可选值有: shiftKey ,altKey,ctrlKey |
empty |
multiboxonly |
boolean |
此属性只有当multiselect为true时有效,. Multiboxonly设置为true时,只有点击checkbox时该行才被选中,点击其他列,将清除当前行的选中。 |
false |
multiselect |
boolean |
此属性设为true时启用多行选择,出现复选框 |
false |
multiselectWidth |
integer |
若multiselect 为true时,定义多选列的宽度。 |
20 |
page |
integer |
设置请求初始页的数量,此参数通过URL从服务器接受数据 |
1 |
pager |
mixed |
定义分页浏览导航条。必须是一个HTML元素,如<div id="page"></div> |
empty |
pagerpos |
string |
定义表格浏览导航条的位置,缺省情况下建立一个包括3部分的导航条:页码,导航按钮和记录信息。 |
center |
pgbuttons |
boolean |
定义导航激活时导航按钮是否显示。 |
true |
pginput |
boolean |
定义导航栏是否有页码输入框。 |
true |
pgtext |
string |
当前页信息。第一个量为当前页,第二个量为总页数。 |
|
prmNames |
array |
缺省情况下prmNames: { page:“page”,rows:“rows”, sort:
“sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null}
以POST方式发送到服务器,字段为: page,rows,sidx,sord,search,nd 例如要将sidx改为mysort,可写成:
prmNames: {sort: “mysort”}. 这样提交到服务器的字符串就变为:
page=1&rows=10&mysort=myindex&sord=asc
若将一些参数设为null,这些参数将不再发往服务器。例如prmNames: { nd:null} 则nd参数将不被发送。
Npage参数参见scroll option. |
none |
postData |
array |
此数组能直接传递到url。这个数组可使用这种形式{name1:value1…}。 |
empty |
reccount |
integer |
只读属性。定义表格显示的行数。切勿与records混淆。 |
0 |
recordpos |
string |
定义页中记录信息的位置,可以是left,center,right。 |
right |
recordpos |
object |
交替行的类 |
true |
records |
integer |
只读属性。定义从请求中获得的记录数 |
none |
recordtext |
string |
可在页面上显示的提示信息,此文字只在viewrecords 为true是有效,并且当记录总数大于0时才显示。
此文字中{}中的内容表示:
{0} 该页显示的第一个记录的记录号
{1} 该页显示的最后一个记录的记录号
{2} 获得的记录总数 |
|
resizeclass |
string |
列可变大小时的类 |
empty |
rowList |
array[] |
用于改变显示行数的下拉列表框的元素数组。 |
empty |
rownumbers |
boolean |
若此属性为true,表格左侧将添加一用于显示行数(从1开始)的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。 |
false |
rowNum |
integer |
表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意:若此参数设置为10,而服务器返回15条记录,将只有10条记录被装入。若此参数被设置为-1,则此检查失效 |
20 |
rownumWidth |
integer |
当rownumbers为true时,定义显示行数的列的宽度。 |
25 |
savedRow |
array |
只读属性。用于行编辑和单元格编辑保存数据之前 |
empty |
scroll |
boolean or integer |
创建动态滚动表格。当设为启用时,pager被禁用,可使用垂直滚动条来装入数据。 |
false |
scrollOffset |
integer |
定义垂直滚动条的宽度。 |
18 |
scrollrows |
boolean |
该项启用时,用setSelection 选定一行,表格将滚动到被选行可见。 |
false |
selarrrow |
array-[] |
只读属性。当multiselect 为true时,包含当前选定的行。此为一维数组,值为表格中选定行的ID。 |
empty |
selrow |
string |
只读属性。内容是最后选定行的ID。如火应用了排序或pagging,该值为null。 |
null |
shrinkToFit |
boolean or integer |
该项描述计算每列相对于表格宽度的初始宽度的类型。
若为true,并且设置了列宽度,则每列的宽度根据定义宽度缩放。
若为false,并且设置了列宽度,表格宽度为设置宽度,列宽度不会重新计算,使用colModel中定义的值 |
true |
sortable |
object |
启用此项,允许使用鼠标重新排序列。 |
true |
sortname |
string |
从服务器读取XML或JSON数据时初始的排序名,此名被加到URL中。 |
empty |
sortorder |
string |
从服务器读取XML或JSON数据时初始的排序类型,此类型被加到URL中。可选值为asc或desc。 |
asc |
subGrid |
boolean |
设置为true,可使用子表格。启用子表格,将在基本表的左边将添加一列,并包含一个“+”图像,用户可以点击扩展行。 |
false |
subGridModel |
array-[] |
该属性用于描述子表格的模式,只有subGrid 为true时有效。它是一个用于描述子表格列的数组。 |
empty |
subGridType |
mixed |
用于定义子表格装入的数据类型,若不定义,则使用与父表格同样的数据类型。 |
null |
subGridUrl |
string |
该属性用于定义子表格获得数据的URL。行的ID将键入此URL中,若要添加其他参数,可使用subGridModel 中的选项。 |
empty |
subGridWidth |
integer |
定义子表格的列宽 |
20 |
toolbar |
array |
该参数定义表格的工具栏。参数是一个包含两个值的数组,第一个值使工具栏有效,第二个值相对位置(可以是top、
bottom、both)。例如:设置toolbar为
[true,”both”],将在表格的头部和底部建立两个工具栏,两个工具栏位两个DIV元素,头部DIV元素的ID为“t_表格ID”,底部DIV元
素的ID为“tb_表格ID”。若只有一个工具栏(top或bottom)时,DIV的ID为“t_表格ID”。 |
[false,''] |
toppager |
boolean |
是否在表格上部显示分页条。 |
false |
totaltime |
integer |
只读参数。用于记录装入XML和JSON数据的时间。 |
0 |
treedatatype |
mixed |
定义初始数据类型 |
null |
treeGrid |
boolean |
启用(禁用)TreeGrid。 |
false |
treeGridModel |
string |
定义TreeGrid的方法。可以是nested或adjacency。 |
nested |
treeIcons |
array |
此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 {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 |
确定treeGrid相对于根元素的级别。 |
0 |
url |
string |
请求数据的url地址 |
null |
userData |
array |
此数组保存请求的自定义信息,可随时使用 |
empty |
userDataOnFooter |
boolean |
到为true时, userData直接放置在页脚。 |
false |
viewrecords |
boolean |
是否在浏览导航栏显示记录总数 |
false |
viewsortcols |
array |
定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。
第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。
第二个参数设定排序图标如何放置。vertical为垂直放置,horizontal为水平放置。
第三个参数设定点击功能。True表示表头点击排序,false表示只点击排序图标排序。若将此参数设为false时,请确保第一个参数为true,否则将无法排序。 |
|
width |
number |
若为设置,表格的宽度为colModel 中定义的所有列宽度的总和。若设置了该项,每列的初始宽度按照shrinkToFit 设置的值 |
none |
xmlReader |
array |
描述预期的XML数据结构的数组。 |
|
属性 |
类型 |
描述 |
默认值 |
align |
string |
定义表格单元格(非表头)的对齐方式,可取值:left, center, right. |
left |
classes |
string |
此属性用于定义列的类名,当有多个类名时,用空格间隔,例如:“class1 class2”。在表格的CSS中,有一个预定义的类ui-ellipsis用于定义特定的行 |
empty |
datefmt |
string |
日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期 |
Y-m-d |
defval |
string |
搜索字段的缺省值,此参数只用于自定义搜索是的初始值。 |
empty |
editable |
boolean |
定义字段是否可编辑,用于单元格编辑、行编辑和表单模式 |
false |
editoptions |
array |
根据edittype 参数定义可用的值数组 |
empty |
editrules |
array |
设置可编辑字段的补充规则 |
empty |
edittype |
string |
定义行编辑和表单模式的编辑类型,可以是text、textarea、select、checkbox、 password、button、image和file。 |
text |
fixed |
boolean |
若设为true,即使shrinkToFit设置为true,列宽也不允许重新计算。GridWidth方法改变表格宽度时,列宽也不会改变。 |
false |
formoptions |
array |
定义表单编辑的各种选项 |
empty |
hidedlg |
boolean |
若设置为true,该列将不出现在模式对话框中,用户可以此控制列的显示或隐藏 |
false |
hidden |
boolean |
定义初始化时,列是否隐藏。 |
false |
index |
string |
通过sidx参数设置排序时的索引名。 |
empty |
key |
boolean |
在未从服务器获得ID的情况下,该列可设置为行ID。只有一列可设置该属性,若出现多列,表格只采用将第一个设置了该属性的列,其他列忽略。 |
false |
label |
string |
当colNames数组为空时,定义此列的标题。若colNames数组和此属性都为空,标题为该列的name属性值。 |
none |
name |
string |
设置列在表格中的唯一名称,此属性是必须的。或者使用保留字subgrid、cb和rn. |
Required |
resizable |
boolean |
定义是否可变列宽 |
true |
sortable |
boolean |
定义是否可以排序 |
true |
sorttype |
mixed |
当datatype为local时,用于定义排序列类型。可取int/integer(整数)、float/number/currency(小数)、date(日期)、text(文本) |
text |
title |
boolean |
当设置为false时,鼠标滑向单元格时不显示title属性 |
true |
width |
number |
设置列的初始宽度,可用pixels和百分比 |
150 |
相关推荐
这可能涉及AJAX请求,从服务器获取数据,然后将数据转化为下拉框选项的键值对格式,如`"option1:Option 1;option2:Option 2"`。 ```javascript function getDynamicOptions() { return $.ajax({ url: 'your_...
网上收藏的 jqGrid中文说明文档——选项设置 挺实用的
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和...通过深入理解 jqGrid 的 API 和各种选项,可以定制化地满足不同场景的需求。
4. **使用方法**:在 HTML 页面中引入 jqGrid 的 JS 和 CSS 文件,然后通过 JavaScript 创建表格并配置相关选项,例如设置数据源、列定义、编辑选项等。 5. **主要功能**: - 数据加载:支持 JSON、XML、HTML、...
JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...
jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件,用于创建交互式表格。它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将...
1. **数据网格布局**:jqGrid提供了丰富的选项来定义表格的列、行以及样式,使得开发者可以轻松创建出符合项目需求的数据展示格式。 2. **Ajax数据加载**:jqGrid支持通过Ajax进行异步数据通信,这意味着用户可以在...
jqGrid 的功能可以通过配置选项进行定制。例如,可以设置列宽、标题、数据类型,以及是否启用分页、排序等功能。在 demo 中,你可以看到如何通过 JavaScript 代码配置这些选项。 5. **CSS 样式** "css" 文件夹...
2. **基本配置**:创建jqGrid时,需要设置一些基本选项,例如表格ID、数据源、列定义等。例如: ```javascript $("#gridId").jqGrid({ url: 'data.json', // 远程数据源 datatype: 'json', colNames: ['Column1...
4. **数据分页**:jqGrid的分页功能默认是启用的,只需设置`rowNum`和`pager`选项即可。当用户更改分页大小或点击分页按钮时,jqGrid会自动处理数据的切片和显示。 5. **数据排序**:在初始化jqGrid时,我们可以...
JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...
**正文** `jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web...通过其丰富的配置选项、事件和方法,开发者可以轻松构建功能完善的表格应用,同时,其优秀的性能和易用性使得jqGrid在Web开发中广受欢迎。
4. **搜索/过滤**:jQGrid 提供多种搜索和过滤选项,包括基本的文本搜索、高级搜索和自定义过滤条件,方便用户快速定位所需信息。 5. **编辑功能**:对于需要在线编辑的数据,jQGrid 支持行内编辑、弹出式编辑和...
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
2. 表格功能:jqGrid提供丰富的表格样式和布局选项,可以自定义列宽、排序、过滤、分页、行选择等。用户还可以通过单击表头进行列排序,或者使用内置的搜索工具来筛选数据。 3. 编辑功能:jqGrid支持行内编辑、弹出...
此外,它还提供了多种预定义的工具栏按钮、搜索选项和行操作功能。 根据压缩包子文件的文件名称 "jqgrid4",我们可以推断这是 jqGrid 的一个版本,可能是第 4 版。在这一版本中,jqGrid 可能进行了性能优化和功能...
1. **数据展示**:jqGrid能够显示大量数据,并且提供多种布局和样式选项,使其在视觉上具有吸引力。正如标题“jqgriddemo”所示,这个示例提供了美观的样式,可以直接应用于项目中。 2. **操作功能**:用户可以方便...
尽管是旧版本,但它仍然是理解和使用jqGrid 3.5的重要参考资料,特别是对于新用户,文档可以帮助他们理解每个函数的作用和配置选项。 6. **jqGrid 3.5的更新与改进** 虽然未提供具体的3.5版本更新日志,但通常每个...
根据提供的文件信息,我们可以提取出关于jqGrid的知识点,具体如下: 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责...
通过分析这些示例,你可以了解到如何配置jqGrid的各种选项,如定义列、设置数据源、处理事件等。 例如,HTML文件可能会引入jqGrid的库文件,并在页面中创建一个div元素作为jqGrid的容器。JavaScript文件则会初始化...