jqGrid超详细属性说明(追加整理).doc

jqGrid相应操作1. jqGrid Options声明了文档的根元素是 html，它在公共标识符被定义为 -/W3C/DTD XHTML 1.0 Transitional/EN 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。另外，需要知道的是，HTML 4.01 规定的三种文档类型、XHTML 1.0 规定的三种 XML 文档类型都是：Strict、Transitional 以及 Frameset。而这句，是在文档中的 标签中使用 xmlns 属性，以指定整个文档所使用的主要命名空间。对于文档声明，了解这些就足够了，现在的html5不再这么繁琐，只需要：就可以了。 1.1. options 参数jQuery(#grid).jqGrid( . groupingView : groupField : name, groupDataSorted : true .);属性:名称值类型说明实列urlstringjqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Jsonurl: ././././K3,datatypestring这个参数用于设定将要得到的数据类型。我最常用的是“json”，其余的类型还包括：xml、xmlstring、local、javascript、functiondatatype: json,mtypestring定义使用哪种方法发起请求，GET或者POSTmtype: post,heightString/intGrid的高度，可以接受数字、%值、auto，默认值为150widthString/intGrid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置shrinkToFitbool此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条shrinkToFit: false,autowidthbool是否自动设置宽度autowidth: true,pagerstring定义页码控制条Page Barpager: #pjqgajax,sortnamestring指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端sortname: invdate,viewrecordsbool设置是否在Pager Bar显示所有记录的总数viewrecords: true,captionstringGrid的标题。如果设置了，则将显示在Grid的Header层caption: jqGrid标题, rowNumint用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows（prmNames中设置的）通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数rowNum: 20,rowListArray一个数组，用于设置Grid可以接受的rowNum值rowList: 10, 20, 30, 50,colNamesArray字符串数组，用于指定各列的题头文本，与列的顺序是对应的 colNames: 物料 , 代码 , 内码,colModelobject用于设定各列的参数.祥细见 1.1.1colModel: name: FMaterialNumber, index: FMaterialNumber, width: 150, sortable: true , name: FMaterialName, index: FMaterialName, width: 150, sortable: true ,prmNamesobject用于设置jqGrid将要向Server传递的参数名称.祥细见 1.1.2prmNames: page: page,rows: rowsjsonReaderobject设定如何解析从Server端发回来的json数据.祥细见 1.1.3jsonReader: root: rows,page: pagegroupingbool是否显示分组，true为显示，默认值为:falsegrouping: true, groupingViewobject分组设置.祥细见 1.1.4groupingView: groupField: FBillNo, FSupplyIDName, groupColumnShow: truemultiselectboolean定义是否可以多选.默认值：falsemultiselect: true,multiboxonlyboolean只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用.默认值：falsemultiboxonly: true,multiselectWidthint当multiselect为true时设置multiselect列宽度.默认值：20multiselectWidth:20,pageint设置初始的页码.默认值：1page:1,pagerString/jquery指定分页栏对象，必须为一个有效的html元素。可以是pager, #pager, jQuery(#pager).推荐用#pagerpager: #pjqgajax,pagerposstring指定分页栏的位置. 值为: left,center(默认值),rightpagerpos: center ,pgbuttonsboolean是否显示翻页按钮. 默认值：truepginputboolean是否显示跳转页面的输入框. 默认值：truepgtextstring当前页信息语言包中设置prmNamesarray当参数为null时不会被发到服务器端. 默认值：noneprmNames :page:page,rows: rows, sort: sidx,order: sord, search: _search, nd: nd, npage:nullpostDataarray此数组内容直接赋值到url上，参数类型：name1:value1空arrayjQuery(#jqgajax).jqGrid(setGridParam, postData: sesKey:escape($(#hfsesKey).val(),pid:escape($(#hfParIDs).val(),n:escape($(#cbName).val(),v:escape($(#tbVal).val(),page:1).trigger(reloadGrid);1.1.1. colModel设定各列的参数jQuery(#grid).jqGrid( . colModel: name: FInterID, index: FInterID, width: 80, sortable: true, hidden: true , name: FEntryID, index: FEntryID, width: 80, sortable: true, hidden: true , .);属性:名称值类型说明实列namestring为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rnname: FInterID,indexstring设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。index: FInterID,labelstring当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头widthint设置列的宽度，目前只能接受以px为单位的数值，默认为150width: 80,sortablebool设置该列是否可以排序，默认为truesortable: true,searchbool设置该列是否可以被列为搜索条件，默认为true search: true,resizablebool设置列是否可以变更尺寸，默认为true。resizable: true,hiddenbool设置此列初始化时是否为隐藏状态，默认为falsehidden: false,alignstring显示文字的方式，值为: left(默认值),center,rightalign: right,formatterstring预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等,（具体参见文档 ）。formatter: number,formatoptionsobject格式化显示列数据formatoptions: decimalSeparator: ., thousandsSeparator: , decimalPlaces: 4, prefix: summaryTypestring如果汇总页脚行启用，在列模式下设置汇总字段的类型值列表: sum(求合), count(汇总), avg(平均值), min, max详细信息summaryType:sumsummaryTplstring此选项作为模板可用于在总结页脚行。默认情况下，它的价值被定义为0 - 这意味着，这将打印的汇总值。该参数可以包含任何有效的HTML代码。详细信息summaryTpl: (0) 小计:classesstring设置列的css。多个class之间用空格分隔，如：class1 class2 。表格默认的css属性是ui-ellipsisdatefmtstring对日期列进行格式化。”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日. ISO Date (Y-m-d)defvalstring查询字段的默认值editableboolean单元格是否可编辑.默认值：falseeditoptionsarray对列进行编辑时设置的一些属性editrulesarray对于可编辑单元格的一些额外属性设置edittypestring可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file, customfixedboolean列宽度是否要固定不可变.默认值：falseformoptionsarray对于form进行编辑时的属性设置formatoptionsarray对某些列进行格式化的设置formattermixed对列进行格式化时设置的函数名或者类型hidedlgboolean是否显示或者隐藏此列.默认值：falseindexstring当排序时定义排序字段名称的索引，参数名为sidxjsonmapstring定义了返回的json数据映射keyboolean当从服务器端返回的数据中没有id时，将此作为唯一rowid使用，默认只能有一个id属性.默认值：falsesearchboolean在搜索模式下，定义此列是否可以作为搜索列.默认值：truesearchoptionsarray设置搜索参数sorttypestring用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本.默认值：textstypestring定义搜索元素的类型.默认值：textsurlstring搜索数据时的urlcellattrfunction此功能属性添加到细胞的过程中创造的数据 - 即动态。例如表格单元格的所有有效的属性，可以使用或与不同性质的风格属性。函数应该返回字符串。传递给这个函数的参数是：ROWID - 行IDVAL - 这将是在细胞内的增值rawObject - 数据行的原始对象 - 也就是说，如果数据类型是JSON - 数组，如果数据类型是XML XML节点。CM - 此列所有在colModel中列出的属性RDATA - 这将是在该行插入的数据行。此参数是数组类型的名称：价值，其中name是在colModel的名称nullfirstsortorderstring如果设置为ASC或DESC，将被列在这个方向排序列第一sort.Subsequent各种像往常一样将切换nullhiddenboolean定义如果此列是隐藏在初始化。falsetemplateobject设置有效的colModel属性。如果你想在方便的列模型覆盖了很多的默认值，可以使用此选项。在网格选项，请参阅cmTemplatenulltitleboolean如果此选项是假的标题是不会显示在该列，当我们悬停用鼠标一个细胞truexmlmapstring定义XML映射进来的XML文件中列。使用一个CCS规范检索数据noneunformatfunction“UNFORMAT”编辑请参阅自定义格式化的单元格的值时的自定义功能。 （UNFORMAT也称为排序操作期间由UNFORMAT返回的值是在排序过程中比较值。）nullviewableboolean只有当viewGridRow方法被激活，此选项才有效。当选项设置为false的列是不会出现在视图的形式True1.1.2. groupingView 分组设置1.1.3. groupingView 分组设置1.1.4. groupingView 分组设置jQuery(#grid).jqGrid( . groupingView : groupField : name, groupDataSorted : true .);属性:名称值类型说明实列groupFieldArraycolModel定义的名称。实现分组的Key，级别从左至右，目前支持1级groupField: name,groupOrderArray定义组级别的初始排序顺序。默认值是ASC。groupOrder: asc,groupTextArray将显示在网格中的分组头文字。默认情况下，如果定义的值0这意味着组值名称将显示。如果指定1，那么将显示分组行总数。它是可以在这里设置任何有效的HTML内容。groupText: 0 - 1条记录,groupColumnShowArray显示/隐藏列，如果启用了分组，我们将此值设置为truegroupColumnShow: true,groupSummaryArray启用或禁用当前组的水平（页脚）行的总结。如果设置了分组，该组的默认值是false。groupSummary: true,showSummaryOnHidebool当折叠组时，是否显示或隐藏小计（页脚）行， showSummaryOnHide: true,groupDataSortedbool如果这个参数设置为true，将发送到服务器的额外的参数，以告诉他对数据进行排序。groupDataSorted: true,groupCollapsebool初始化时是否显示或隐藏组的详细行groupCollapse: false,plusiconstring收缩时的图标样式ui-icon-circlesmall-plusminusiconstring展开时的图标样式ui-icon-circlesmall-minus2. 方法Methods2.1. addRowData 编辑行jQuery(#grid_id). addRowData(rowid,rdata,pos,src); 实例: $(#gvBillEntry).addRowData(rowid, , first); 属性:名称值类型说明实列rowidint该行的ID编号rdatabool新增时行初始化数据。posfunction新增类型：pos可以为first(插入顶行),last(插入尾行默认值),before,after,为后两者是需要指定相对的行IDPos: lastsrcstring如果pos: 弹出的新增页面2.2. editRow 编辑行jQuery(#grid_id).editRow(rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);实例: jQuery(# jqgajax).editRow(id, true); jQuery(#grid_id).jqGrid(editRow, rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);实例:jQuery(#jqgajax).jqGrid(editRow, mydata3i.id, true, pickdates);属性:名称值类型说明实列rowidint该行的ID编号keysbool设置为true时，我们可以使用Enter键来保存该行Esc键取消编辑。oneditfuncfunction成功访问编辑行之前，允许用户输入字段的访问后，火灾。行的ID作为参数传递给这个函数的一个参数。succesfuncstring如果定义，这个函数被调用后，立即请求成功。此功能是通过从服务器返回的数据。根据从服务器的数据，这个函数应该返回true或false。urlstring如果定义，该参数将替换从选项数组editurl参数。如果设置为“clientArray”，数据是不向服务器发送，而是保存网格（大概后手动储蓄）。extraparamstring名称类型的数组：值。当设置这些值一起发布到服务器的其他值。aftersavefuncstring如果定义，该函数被调用后的数据保存到服务器。传递给这个函数的参数的rowid和从服务器请求的响应。事件被称为太URL时设置为“clientArray”。errorfuncstring如果定义，该函数被调用后的数据保存到服务器。传递给这个函数的参数的rowid和从服务器请求的响应afterrestorefuncstring如果定义，在restoreRow调用这个函数，（如果该行没有成功保存）后恢复行方法。这个函数，我们通过ROWID3. 事件事件:名称参数说明afterInsertRowRowid,rowdata,rowelem当插入每行时触发。rowid插入当前行的id；rowdata插入行的数据，格式为name: value，name为colModel中的名字beforeRequestnone向服务器端发起请求之前触发此事件但如果datatype是一个function时例外beforeSelectRowrowid, e当用户点击当前行在未选择此行时触发。rowid：此行id；e：事件对象。返回值为ture或者false。如果返回true则选择完成，如果返回false则不会选择此行也不会触发其他事件gridCompletenone当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件loadCompletexhr当从服务器返回响应时执行，xhr：XMLHttpRequest 对象loadErrorxhr,status,error如果请求服务器失败则调用此方法。xhr：XMLHttpRequest 对象；satus：错误类型，字符串类型；error：exception对象onCellSelectrowid,iCol,cellcontent,e当点击单元格时触发。rowid：当前行id；iCol：当前单元格索引；cellContent：当前单元格内容；e：event对象ondblClickRowrowid,iRow,iCol,e双击行时触发。rowid：当前行id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象onHeaderClickgridstate当点击显示/隐藏表格的那个按钮时触发；gridstate：表格状态，可选值：visible or hiddenonPagingpgButton点击翻页按钮填充数据之前触发此事件，同样当输入页码跳转页面时也会触发此事件onRightClickRowrowid,iRow,iCol,e在行上右击鼠标时触发此事件。rowid：当前行id；iRow：当前行位置索引；iCol：当前单元格位置索引；e：event对象。此事件不支持opera游览器onSelectAllaRowids,statusmultiselect为ture，且点击头部的checkbox时才会触发此事件。aRowids：所有选中行的id集合，为一个数组。status：boolean变量说明checkbox的选择状态，true选中false不选中。无论checkbox是否选择，aRowids始终有值onSelectRowrowid,status当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用onSortColindex,iCol,sortorder当点击排序列但是数据还未进行变化时触发此事件。index：name在colModel中位置索引；iCol：当前单元格位置索引；sortorder：排序状态：desc或者ascresizeStartevent, index当开始改变一个列宽度时触发此事件。event：event对象；index：当前列在colModel中位置索引resizeStopnewwidth, index当列宽度改变之后触发此事件。newwidth：列改变后的宽度；index：当前列在colModel中的位置索引serializeGridDatapostData向服务器发起请求时会把数据进行序列化，用户自定义数据也可以被提交到服务器端4. 方法方法:名称返回值参数说明addJSONDatanonedata使用传来的data数据填充表格。使用方法：var mygrid = jQuery(”#”+grid_id)0;var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null;addRowDataBool(成功true,否则false)rowid,data, position, srcrowid根据参数插入一行新的数据，rowid为新行的id，data为新行的数据，position为新增行的位置，srcrowid为新增行的参考位置。data数据格式：name1:value1,name2: value2 name为在colModel中指定的名称addXMLDatanonedata根据传来的数据填充表格。使用方法：var mygrid = jQuery(”#”+grid_id)0; mygrid.addXmlData(xmlresponse.responseXML);clearGridDatajqGrid对象clearfooter清除表格当前加载的数据。如果clearfooter为true时则此方法删除表格最后一行的数据delRowDataBool(成功true,否则false)rowid根据rowid删除行，但不会从服务器端删除数据footerDatajgGrid对象action,data, format设置或者取得底部数据。action：“get”或者“set”，默认为“get”，如果为“get”返回值为name:value，name为colModel中名称。如果为“set”则值为name：value，name是colModel中的名称。format：默认为true，当为true时，在设置新值时会调用formatter格式化数值getCell单元格内容rowid, iCol返回指定rowid，iCol的单元格内容，iCol既可以是当前列在colModel中的位置索引也可以是name值。注意：在编辑行或者单元格时不能使用此方法，此时返回的并不是改变的值，而是原始值getColarray or valuecolname, returntype, mathoperation返回列的值。colname既可以是当前列在colModel中的位置索引也可以是name值。returntype指定返回数据的类型，默认为false。当为false时，返回的数组中只包含列的值，当为true时返回数组是对象数组，具体格式 id:rowid, value:cellvalue ，id为行的id，value为列的值。如： id:1,value:1,id:2,value:2。mathoperation 可选值为sum, avg, countgetDataIDsarraynone返回当前grid里所有数据的idgetGridParammixed valuename返回请求的参数信息getIndmixedrowid,rowcontent如果rowcontent为false，返回行所在的索引位置，id为行id。rowcontent默认为false。如果rowconent为ture则返回的为行对象，如果找不到行则返回falsegetRowDataarrayrowid or none返回指定行的数据，返回数据类型为name:value，name为colModel中的名称，value为所在行的列的值，如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据，它得到的并不是编辑后的值hideColjqGrid对象colnameorcolnames如果参数为一个列名则隐藏此列，如果给定的是数组则隐藏指定的所有列。格式： “name1”,”name2”remapColumnsnonepermutation, updateCells, keepHeader调整表格列的显示顺序,permutation为当前列的顺序，假如值是1,0,2，那么第一列就会在第二位显示。如果updateCells为ture则是对单元格数据进行重新排序，如果keepHeader为true则对header数据显示位置进行调整resetSelectionjqGrid对象none选择或者反选行数据，在多选模式下也同样起作用setCaptionjqGrid对象caption设置表格的标题setCelljqGrid对象rowid,colname, data, class, properties改变单元格的值。rowid：当前行id；colname：列名称，也可以是列的位置索引，从0开始；data：改变单元格的内容，如果为空则不更新；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置单元格属性setGridParamjqGrid对象object设置grid的参数。有些参数的修改必须要重新加载grid才可以生效，这个方法可以覆盖事件setGridHeightjqGrid对象new_height动态改变grid的高度，只能对单元格的高度进行设置而不能对表格的高度进行动态修改。new_height：可以是象素值，百分比或者autosetGridWidthjqGrid对象new_width,shrink动态改变表格的宽度。new_width:表格宽度，象素值；shrink：true或者false，作用同shrinkToFitsetLabeljqGrid对象colname, data, class, properties给指定列设置一个新的显示名称。colname：列名称，也可以是列的位置索引，从0开始；data：列显示名称，如果为空则不修改；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置label的属性setRowDataBool(成功true,否则false)rowid,data, cssprop更新行的值，rowid为行id。data值格式：name1:value1,name2: value2 name为colModel中名称；cssprop：如果是string则会使用addClass方法将其加入到行的css中，如果是array或者对象则会直接加到style属性中setSelectionjqGrid对象rowid,onselectrow选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow，onselectrow默认为tureshowColjqGridcolname显示列。colname可以是数组“name1”,”name2”,但是name1或者name2必须是colModel中的nametrigger(“reloadGrid”)jqGrid对象none重新加载当前表格，也会向服务器发起新的请求updateColumnsnonenone同步表格的宽度，用在表格拖拽时，用法：var mygrid=jQuery(“#grid_id”)0;mygrid.updateColumns();4.1.1. getGridParamOptionReturnsgetGridParam(url)the current url from options arraygetGridParam(sortname)the name of last sorted columngetGridParam(sortorder)the last sorted ordergetGridParam(selrow)the id of the selected row, null if row is not selectedgetGridParam(page)the current page number.getGridParam(rowNum)the current number of requested rowsgetGridParam(datatype)the current datatype.getGridParam(records)the current number of records in grid.getGridParam(selarrrow)array of ids of the selected rows when multiselect options is true. Empty array if not selection.reccountsetGridParamMethodDescriptionsetGridParam(url:newvalue)Parameters: url - string Set a new url, replacing the older.setGridParam(sortname:newvalue)Parameters: sortname - string Set a new sort namesetGridParam(sortorder:newvalue)Parameters: sortorder - string (asc or desc) Set a new sort ordersetGridParam(page:newvalue)Parameters: page - integer 0 Set a new page numbersetGridParam(rowNum:newvalue)Parameters: rownum - integer 0 Set a new number of requested rows.setGridParam(datatype:newvalue)Parameters: datatype - string (xml,json.xmlstring,jsonstring, clientSide) Set a new datatype.4.1.2. 编辑栏 编辑框jQuery(#list2).jqGrid(navGrid,#pager2, edit:true, add:true, del:true,/edit -这里注意 edit ,add ,del 的顺序，默认的这个顺序，好像是不能改的/afterShowForm:afterShowEdit,afterSubmit:processAddEdit ,/beforeSubmit:validateData,closeAfterAdd:true,closeAfterEdit:true,reloadAfterSubmit:true,/add /afterShowForm:afterShowAdd,afterSubmit:processAddEdit ,/beforeSubmit:validateData,closeAfterAdd:true,closeAfterEdit:true,/del/view:true)/* .navButtonAdd(#pager2, caption:Add, onClickButton:function()alert(i am button); );*/);function afterShowEdit(formId)/do stuff after the form is renderedfunction afterShowAdd(formId)1.获得当前列表行数：$(#gridid).getGridParam(reccount);2.获取选中行数据（json）：$(#gridid).jqGrid(getRowData, id);3.刷新列表:$(refreshSelector).jqGrid(setGridParam, url: ), postData: ).trigger(reloadGrid);4.选中行：$(#jqGrid).setSelection(1, true);（Toggles a selection of the row with id =rowid; ifonselectrowis true (the default) then the event onSelectRow is launched, otherwise it is not.）/true:重新加载表格数据, false:不重新加载表格数据5.重置选中行：$(#jqgrid).resetSelection(); /Resets (unselects) the selected row(s). Also works in multiselect mode.6.清除：$(#jqgrid).clearGridData();/Clears the currently loaded data from grid. If the clearfooter parameter is set to true, the method clears the data placed on the footer row.7.$(#jqgrid).setCell(rowid,colname,nData,cssp,attrp);/This method can change the content of particular cell and c