发布于 2016-08-21 06:40:57 | 141 次阅读 | 评论: 0 | 来源: 网友投递
jqGrid jQuery网格插件
jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。
jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。
jqGrid选项(Option)
调用jqGrid只需要执行以下代码:
jQuery("#grid_id").jqGrid(options);options即jqGrid的选项设置，请参照以下表格。
| 属性 | 类型 | 描述 | 默认值 |
| 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数据结构的数组。 |
ColModel API
colModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为：
jQuery("#gridid").jqGrid({
...
colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
}); 下面给大家介绍jqGrid提供的事件列表。
| 事件 | 参数 | 描述 |
| afterInsertRow | rowid rowdata rowelem |
此事件发生在每次插入行后 rowid 为插入的行ID rowdata 是被插入行的数据数组。格式为name:value对，name在colModel定义 rowelem 是应答元素。xml为xml行，json为所有行数据。 注意：若gridview 为true，此事件不会发生 |
| beforeRequest | none | 此事件发生在任何数据请求前，但当datatype为function时不发生。 |
| beforeSelectRow | rowid, e | 此事件发生在用户点击行，选中该行前。 rowid 为行的ID，e为事件对象 该事件将返回布尔值true（行被选中）或false（行未被选中）。 |
| gridComplete | none | 此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。 |
| loadBeforeSend | xhr, settings |
此事件发生在XMLHttpRequest被发送前，用于修改对象属性（如headers）。 xhr 为XMLHttpRequest对象。 |
| loadComplete | data | 此事件发生在每个服务器请求后。xhr 为XMLHttpRequest对象。 |
| loadError | xhr, status, error |
此事件在请求失败时发生。事件有3个参数： xhr 为XMLHttpRequest对象； Satus 为错误类型描述；error 为错误对象。 |
| onCellSelect | rowid, iCol, cellcontent, e |
此事件在点击表格特定单元格时发生。 rowid 为行ID；iCol 为列索引； cellcontent 为单元格中内容； e 点击事件对象。 |
| ondblClickRow | rowid, iRow, iCol, e |
此事件发生在行双击后发生。 rowid为行ID；iRow 为行索引（勿与rowid混淆）； iCol为列索引； e 为事件对象。 |
| onHeaderClick | gridstate | 此事件发生在点击显示或隐藏表格后发生（hidegrid为true） gridstate为表格状态，有visible和hidden两个值 |
| onPaging | pgButton | 此事件发生在点击page button后，填充数据前，及用户输入一个与当前页页码不同的新页码并回车时。 |
| onRightClickRow | rowid, iRow, iCol, e |
此事件发生在右击行后。（此事件在Opera浏览器中无效） rowid为行ID；iRow为行索引（勿与rowid混淆） iCol为列索引； e为事件对象 |
| onSelectAll | aRowids, status |
此事件发生在点击标题的复选框时发生（multiselect为true） aRowids 选定行ID的数组（哪些行的复选框与头复选框相同） status 头复选框的选定的布尔值，true为选中，false为 |
| onSelectRow | rowid, status |
此事件发生在行点击后 rowid 为行ID； status 为选择状态。当multiselect为true时使用，当行被选中时返回true；为选中时返回false。 |
| onSortCol | index, iCol, sortorder |
此事件发生在列排序被点击之后，数据排序前 index 为colModel 中定义的索引名iCol 为列的索引号 sortorder 为新的排序方式，asc或desc |
| resizeStart | event, index | 此事件发生在列被重新定义宽度时。 event 为事件对象；index 为在colModel 中定义的列索引。 |
| resizeStop | newwidth, index | 此事件发生在列被重新定义宽度后。 newwidth 为新的列宽度；index 为在colModel 中定义的列索引。 |
| serializeGridData | postData | 通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据（如JSON字符串、XML字符串）要发给服务器时，可使用该事件。 |