jqGrid中文文档

1、Jqgrid中文文档-整理:沧浪雾月客一、主要API接口getGridParam、setGridParam：getGridParam方法：getGridParam(url)： 获取当前的AJAX的URLgetGridParam(sortname)：排序的字段getGridParam(sortorder)：排序的顺序getGridParam(selrow)：得到选中行的IDgetGridParam(page)：当前的页数getGridParam(rowNum)：当前有多少行getGridParam(datatype)：得到当前的datatypegetGridParam(records)：得到总记

2、录数getGridParam(selarrrow)：可以多选时，返回选中行的IDsetGridParam方法：setGridParam(url:newvalue)：可以设置一个grid的ajax url，可配合trigger(reloadGrid)使用setGridParam(sortname:newvalue)：设置排序的字段setGridParam(sortorder:newvalue)：设置排序的顺序asc or descsetGridParam(page:newvalue)：设置翻到第几页setGridParam(rowNum:newvalue)：设置当前每页显示的行数setGridP

3、aram(datatype:newvalue)：设置新的datatype(xml,json) 形式2：jQuery(#tableID).jqGrid(getGridParam,url) jQuery(#tableID).jqGrid(setGridParam,page:2).trigger(reloadGrid)二、jqGrid colModel表体结构配置name 必要的属性，具有唯一标识性，如在弹出的editform窗体中，将作为input的name属性 index为排序用，最方便的是设为数据库字段 width150，宽度，数值alignleft,center,right detefmtd

4、ate:true editableflase editoptionsedittype为先决条件，此为值， editrules编辑规范 edittypetext,textarea,select,checkbox,password formatoptions formatter hidedlgfalse (appear in the modal dialog) hiddenfalse 在加载时是否隐藏列 jsonmap声明json的格式 keyfalse label当没有设置colNames时，在列里用此代替，此项也为空时，就是name代替 resizabletrue，列宽可调节 searchtr

5、ue，可搜索sortabletrue，可排序sorttypetext,int,float,date，排序子段类型xmlmap声明xml的格式jQuery(#grid_id).jqGrid(options);options即jqGrid的选项设置，请参照以下表格。属性类型描述默认值ajaxGridOptionsobject此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。emptyajaxSelectOptionsobject此项用于设置在editoptions或searchoption

6、s对象中通过dataUrl选择元素时， ajax的全局属性。emptyaltclassstring交替行的类。 此项仅当altRows设置为true时有效。ui-priority-secondaryaltRowsboolean设置为交替行表格falseautoencodeboolean当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如 将被转换为<falseautowidthboolean当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法falsecapti

7、onstring表格的标题。显示在Header上。若为空时将不会显示。emptycellLayoutinteger该属性确定单元格的padding + border 宽度。通常不修改该属性，但若表格的CSS中改变了td元素，该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=55cellEditboolean是否允许单元格编辑。falsecellsubmitstring确定单元格内容保存方式是remote还是clientArray 。remotecellurlstring单元格保存的url。nullcolModelarr

8、ay描述列参数数组。这是表格最重要的部分，详见colModel API.nullcolNamesarray列名称数组。该名称将在Header中显示。名称以逗号分隔，数量应与colModel 数组数量相等emptydataarray以数组的形式保存本地数据。emptydatastrstring当datatype被设置为xmlstring或jsonstring时，为数据串。nulldatatypestring定义表格希望获得的数据的类型，有效值有：Xml xml数据xmlstringxml字符串jsonJSON数据jsonstringJSON字符串local客户端数据（数组）javascriptj

9、avascript数据function函数返回数据xmldeselectAfterSortboolean只适用于当datatype为local时。当一个排序被应用时取消当前选定行。truedirectionstring表格中的书写方向。“ltr”从左到右(缺省值)，“rtl”从右到左ltrediturlstring定义行内编辑地址URLnullemptyrecordsstring当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。ExpandColClickbooleantrue时，点击展开行的文字，treeGrid展开或收拢trueExpandCol

10、umnstring指定用于张开treeGrid的列（名称来自colModel），未设置即用第一列。此项只有当treeGrid为true时有效.nullfooterrowboolean如果设置为true时，将生成一个表脚行，列数等于colModelfalseforceFitboolean如果设置为true，改变列宽，相邻列也将调整以适应整体表格，将不会出现水平滚动条。falsegridstatestring表格的当前状态。有visible或hiddenvisiblegridviewboolean设置为true将提高510倍的显示速度。但不能再使用treeGrid, subGrid, 或after

11、InsertRow事件falsegroupingboolean是否设置表格组falseheightmixed表格高度。可为数值、百分比或auto150hiddengridboolean如果设置为true，表格开始被隐藏，数据不被载入，只显示标题。当第一次点击显示/隐藏按钮显示表格，数据从服务器载入。falsehidegridboolean是否允许显示/隐藏按钮可用。只有标题不为空时可用。truehoverrowsboolean表行是否有鼠标悬停效果truejsonReaderarrayJSON数据结构数组lastpageinteger请求返回的总页数0lastsortinteger排序的列号（

12、0开始）0loadonceboolean设置为true时，表格只一次读取服务器数据（使用适当datatype），之后，datatype 自动变为local ，所有进一步操作都在客户端完成，pager功能（若存在）将失效。falseloadtextstring数据请求和排序时显示的文本Loadingloaduistring此项控制ajax进程进行时的动作。Disable取消jqGrid的进程指示，可使用自定义的指示。 enable (缺省)表格中间显示loading。 block 显示“Loading”信息，禁用页面上的所有功能，直到数据装入完成。enablemtypestring定义提交类型P

13、OST或GETGETmultikeystring此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有： shiftKey ，altKey，ctrlKeyemptymultiboxonlyboolean此属性只有当multiselect为true时有效，. Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中。falsemultiselectboolean此属性设为true时启用多行选择，出现复选框falsemultiselectWidthinteger若multiselect 为true时，定义多选列的宽度

14、。20pageinteger设置请求初始页的数量，此参数通过URL从服务器接受数据1pagermixed定义分页浏览导航条。必须是一个HTML元素，如emptypagerposstring定义表格浏览导航条的位置，缺省情况下建立一个包括3部分的导航条：页码，导航按钮和记录信息。centerpgbuttonsboolean定义导航激活时导航按钮是否显示。truepginputboolean定义导航栏是否有页码输入框。truepgtextstring当前页信息。第一个量为当前页，第二个量为总页数。prmNamesarray缺省情况下prmNames: page:“page”,rows:“rows”

15、, 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 optio

16、n.nonepostDataarray此数组能直接传递到url。这个数组可使用这种形式name1:value1。emptyreccountinteger只读属性。定义表格显示的行数。切勿与records混淆。0recordposstring定义页中记录信息的位置，可以是left，center，right。rightrecordposobject交替行的类truerecordsinteger只读属性。定义从请求中获得的记录数nonerecordtextstring可在页面上显示的提示信息，此文字只在viewrecords 为true是有效，并且当记录总数大于0时才显示。此文字中中的内容表示：0

17、该页显示的第一个记录的记录号1 该页显示的最后一个记录的记录号2 获得的记录总数resizeclassstring列可变大小时的类emptyrowListarray用于改变显示行数的下拉列表框的元素数组。emptyrownumbersboolean若此属性为true，表格左侧将添加一用于显示行数（从1开始）的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。falserowNuminteger表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意：若此参数设置为10，而服务器返回15条记录，将只有10条记录被装入。若此参数被设置为-1，则此

18、检查失效20rownumWidthinteger当rownumbers为true时，定义显示行数的列的宽度。25savedRowarray只读属性。用于行编辑和单元格编辑保存数据之前emptyscrollboolean or integer创建动态滚动表格。当设为启用时，pager被禁用，可使用垂直滚动条来装入数据。falsescrollOffsetinteger定义垂直滚动条的宽度。18scrollrowsboolean该项启用时，用setSelection 选定一行，表格将滚动到被选行可见。falseselarrrowarray-只读属性。当multiselect 为true时，包含当前选

19、定的行。此为一维数组，值为表格中选定行的ID。emptyselrowstring只读属性。内容是最后选定行的ID。如火应用了排序或pagging，该值为null。nullshrinkToFitboolean or integer该项描述计算每列相对于表格宽度的初始宽度的类型。若为true，并且设置了列宽度，则每列的宽度根据定义宽度缩放。若为false，并且设置了列宽度，表格宽度为设置宽度，列宽度不会重新计算，使用colModel中定义的值truesortableobject启用此项，允许使用鼠标重新排序列。truesortnamestring从服务器读取XML或JSON数据时初始的排序名，此名

20、被加到URL中。emptysortorderstring从服务器读取XML或JSON数据时初始的排序类型，此类型被加到URL中。可选值为asc或desc。ascsubGridboolean设置为true，可使用子表格。启用子表格，将在基本表的左边将添加一列，并包含一个“+”图像，用户可以点击扩展行。falsesubGridModelarray-该属性用于描述子表格的模式，只有subGrid 为true时有效。它是一个用于描述子表格列的数组。emptysubGridTypemixed用于定义子表格装入的数据类型，若不定义，则使用与父表格同样的数据类型。nullsubGridUrlstring该属

21、性用于定义子表格获得数据的URL。行的ID将键入此URL中，若要添加其他参数，可使用subGridModel 中的选项。emptysubGridWidthinteger定义子表格的列宽20toolbararray该参数定义表格的工具栏。参数是一个包含两个值的数组，第一个值使工具栏有效，第二个值相对位置（可以是top、bottom、both）。例如：设置toolbar为 true,”both”，将在表格的头部和底部建立两个工具栏，两个工具栏位两个DIV元素，头部DIV元素的ID为“t_表格ID”，底部DIV元素的ID为“tb_表格ID”。若只有一个工具栏（top或bottom）时，DIV的ID为

22、“t_表格ID”。false,toppagerboolean是否在表格上部显示分页条。falsetotaltimeinteger只读参数。用于记录装入XML和JSON数据的时间。0treedatatypemixed定义初始数据类型nulltreeGridboolean启用（禁用）TreeGrid。falsetreeGridModelstring定义TreeGrid的方法。可以是nested或adjacency。nestedtreeIconsarray此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 plus:ui-icon-triangle-1-e,minu

23、s:ui-icon-triangle-1-s,leaf:ui-icon-radio-offtreeReaderarray扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。tree_root_levelnumeric确定treeGrid相对于根元素的级别。0urlstring请求数据的url地址nulluserDataarray此数组保存请求的自定义信息，可随时使用emptyuserDataOnFooterboolean到为true时， userData直接放置在页脚。falseviewrecordsboolean是否在浏览导航栏显示记录总

24、数falseviewsortcolsarray定义表头中排序图标的外观和行为。缺省为false,vertical,true。第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。第二个参数设定排序图标如何放置。vertical为垂直放置，horizontal为水平放置。第三个参数设定点击功能。True表示表头点击排序，false表示只点击排序图标排序。若将此参数设为false时，请确保第一个参数为true，否则将无法排序。widthnumber若为设置，表格的宽度为colModel 中定义的所有列宽度的总和。

25、若设置了该项，每列的初始宽度按照shrinkToFit 设置的值nonexmlReaderarray描述预期的XML数据结构的数组。ColModel API属性类型描述默认值alignstring定义表格单元格（非表头）的对齐方式，可取值：left, center, right.leftclassesstring此属性用于定义列的类名，当有多个类名时，用空格间隔，例如：“class1 class2”。在表格的CSS中，有一个预定义的类ui-ellipsis用于定义特定的行emptydatefmtstring日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月

26、，d、dd用于日期Y-m-ddefvalstring搜索字段的缺省值，此参数只用于自定义搜索是的初始值。emptyeditableboolean定义字段是否可编辑，用于单元格编辑、行编辑和表单模式falseeditoptionsarray根据edittype 参数定义可用的值数组emptyeditrulesarray设置可编辑字段的补充规则emptyedittypestring定义行编辑和表单模式的编辑类型，可以是text、textarea、select、checkbox、 password、button、image和file。textfixedboolean若设为true，即使shrinkT

27、oFit设置为true，列宽也不允许重新计算。GridWidth方法改变表格宽度时，列宽也不会改变。falseformoptionsarray定义表单编辑的各种选项empty26hidedlgboolean若设置为true，该列将不出现在模式对话框中，用户可以此控制列的显示或隐藏falsehiddenboolean定义初始化时，列是否隐藏。falseindexstring通过sidx参数设置排序时的索引名。emptykeyboolean在未从服务器获得ID的情况下，该列可设置为行ID。只有一列可设置该属性，若出现多列，表格只采用将第一个设置了该属性的列，其他列忽略。falselabelstri

28、ng当colNames数组为空时，定义此列的标题。若colNames数组和此属性都为空，标题为该列的name属性值。nonenamestring设置列在表格中的唯一名称，此属性是必须的。或者使用保留字subgrid、cb和rn.Requiredresizableboolean定义是否可变列宽truesortableboolean定义是否可以排序truesorttypemixed当datatype为local时，用于定义排序列类型。可取int/integer（整数）、float/number/currency（小数）、date（日期）、text（文本）texttitleboolean当设置为fa

29、lse时，鼠标滑向单元格时不显示title属性truewidthnumber设置列的初始宽度，可用pixels和百分比150事件参数描述afterInsertRowrowidrowdatarowelem此事件发生在每次插入行后rowid为插入的行IDrowdata是被插入行的数据数组。格式为name:value对，name在colModel定义rowelem是应答元素。xml为xml行，json为所有行数据。注意：若gridview 为true，此事件不会发生beforeRequestnone此事件发生在任何数据请求前，但当datatype为function时不发生。beforeSelectR

30、owrowid, e此事件发生在用户点击行，选中该行前。rowid为行的ID，e为事件对象该事件将返回布尔值true（行被选中）或false（行未被选中）。gridCompletenone此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。loadBeforeSendxhr,settings此事件发生在XMLHttpRequest被发送前，用于修改对象属性（如headers）。 xhr 为XMLHttpRequest对象。loadCompletedata此事件发生在每个服务器请求后。xhr 为XMLHttpRequest对象。loadErrorxhr,status

31、,error此事件在请求失败时发生。事件有3个参数：xhr为XMLHttpRequest对象；Satus为错误类型描述；error为错误对象。onCellSelectrowid,iCol,cellcontent,e此事件在点击表格特定单元格时发生。rowid为行ID；iCol为列索引；cellcontent为单元格中内容；e点击事件对象。ondblClickRowrowid,iRow,iCol,e此事件发生在行双击后发生。rowid为行ID；iRow为行索引（勿与rowid混淆）；iCol为列索引；e为事件对象。onHeaderClickgridstate此事件发生在点击显示或隐藏表格后发生（

32、hidegrid为true） gridstate为表格状态，有visible和hidden两个值onPagingpgButton此事件发生在点击page button后，填充数据前，及用户输入一个与当前页页码不同的新页码并回车时。onRightClickRowrowid,iRow,iCol,e此事件发生在右击行后。（此事件在Opera浏览器中无效）rowid为行ID；iRow为行索引（勿与rowid混淆）iCol为列索引；e为事件对象onSelectAllaRowids,status此事件发生在点击标题的复选框时发生（multiselect为true）aRowids选定行ID的数组（哪些行的复

33、选框与头复选框相同）status头复选框的选定的布尔值，true为选中，false为onSelectRowrowid,status此事件发生在行点击后rowid为行ID；status 为选择状态。当multiselect为true时使用，当行被选中时返回true；为选中时返回false。onSortColindex,iCol,sortorder此事件发生在列排序被点击之后，数据排序前index为colModel 中定义的索引名iCol为列的索引号sortorder为新的排序方式，asc或descresizeStartevent, index此事件发生在列被重新定义宽度时。event为事件对象；

34、index为在colModel 中定义的列索引。resizeStopnewwidth, index此事件发生在列被重新定义宽度后。newwidth为新的列宽度；index为在colModel 中定义的列索引。serializeGridDatapostData通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据（如JSON字符串、XML字符串）要发给服务器时，可使用该事件。以下是jqGrid提供的一系列方法：方法参数返回值描述addJSONDatadatanone用传递的data（数组）填充网格。用法：假如我们从web服务器获得的数据（jsonresp

35、onse），则var mygrid = jQuery(”#”+grid_id)0;var myjsongrid = eval(”(”+jsonresponse.responseText+”)”);mygrid.addJSONData(myjsongrid);myjsongrid = null;jsonresponse =null;将填充网格。当然，myjsongrid中的数据在传递到addJSONData之前可以被操作。addRowDatarowid,data,position,srcrowidtrue on success,false otherwise插入一新行，rowid为新行的ID，d

36、ata（数组）为新行数据，position为新行插入的位置（first为表头，last为表尾，srcrowid指定偏移位置）。Data数组的格式为：name1:value1,name2: value2 ，name为colModel指定的名称。addXmlDatadatanone用传入的data填充网格。用法：假如我们从web服务器获得数据(xmlresponse)，则 var mygrid = jQuery(”#”+grid_id)0;mygrid.addXmlData(xmlresponse.responseXML);将填充网格。当然，xmlresponse中的数据在传递到addXmlDat

37、a之前可以被操作。clearGridDataclearfooterjqGrid object清除网格中当前装入的数据，如果clearfooter 参数为true，则清除网格最后一行数据。delRowDatarowidtrue on success,false otherwise删除id = rowid的行。但不会删除服务器上的数据。footerDataaction,data,formatjqGrid object此方法获得或设置网格底部数据。action 可设置为get（缺省）或set。 Get从底部返回name:value对象（name为colModel中的名称）。此时其他两个参数无效。Se

38、t将data数组（对象）设置到底部。Data为colName中的名称和值对。format 缺省为true，表示设置时使用formatter (如果colModel中已定义)。false表示不使用formattergetCellrowid,iColcell content返回id = rowid行，column = iCol列的内容。 iCol可以是列的索引或colName中定义的名称。在编辑行或列时不能使用该方法，此时返回的不是当前值，而是原始值。getColcolname, returntype, mathoperationarray or value返回列值数组。colname 可以是列的

39、索引值或colModel中的名称。returntype 确定返回数组的类型，为false(缺省)时，数组只包含值。为true时为对象数组，格式为id:rowid, value:cellvalue，id为行的id， cellvalue为单元格的值。如 id:1,value:1,id:2,value:2mathoperation为可选参数，可以是sum、avg和count。若此参数进行了有效设置，则返回计算后的值，若无效，则返回空数组。getDataIDsnonearray返回当前网格显示数据的ID数组。无数据时返回空数组。getGridParamnamemixed value返回请求的参数的值。

40、name 是options 数组中的名称，若为设置则options被返回。 详见jqGrid中文说明文档选项设置.getIndrowid,rowcontentmixed当rowcontent 设置为false（缺省）时，返回id= rowid行的索引值。若rowcontent设置为true，则返回整行。若为找到rowid则返回false。getLocalRowrowidrow objectReturn the row data from the local array stored in data parameter when the datatype is localgetRowDataro

41、wid or nonearray返回id = rowid行的数据数组。格式为name:value对，name为colModel中的名称，value为该行的值。未找到返回空数组。在行或列编辑时此方法不可用，此时返回的不是当前值，而是原始值。若rowid为设置，则返回网格中所有数据数组。hideColcolnameorcolnamesjqGrid object根据colname或colnames数组给定的列名隐藏相应的列，列名必须是colModel中定义的名称。表格的宽度不会改变。remapColumnspermutation, updateCells, keepHeadernone调整列的显示顺序。permutation指定调整后的顺序，如 1,0,2 表示第一列在第二位显示。若updateCells 设置为true，列数据将重新排序。若keepHeader 设置为true，header单元格将重新排序。resetSelectionnonejqGrid object选择（反选）行。多选择模式下同样可用。setCaptioncaptionjqGrid object设置新的表头文字。若表头为隐藏，将显示。setCell