jqGrid超详细属性说明.pdf

《jqGrid超详细属性说明.pdf》由会员分享，可在线阅读，更多相关《jqGrid超详细属性说明.pdf（37页珍藏版）》请在三一文库上搜索。

1、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 属性， 以指

2、定整个文档所使用的主要命名空间。 对于文档声明，了解这些就足够了，现在的html5 不再这么繁琐，只需要： 就可以了。 1.1.options 参数 jQuery(“#grid“).jqGrid( . groupingView : groupField : name, groupDataSorted : true . ); 属性 : 名称值类型说明实列 urlstringjqGrid控件通过这个参数得到需 要显示的数据，具体的返回值可 以使 XML也可以是 Json url: /K3, datatypestring这个参数用于设定将要得到的数 据类型。我最常用的是“ json ” ， 其 余

3、的 类 型 还 包 括 ： xml 、 xmlstring、local、 javascript、function datatype: “json“, mtypestring 定义使用哪种方法发起请求， GET或者 POST mtype: post, height String/int Grid的高度，可以接受数字、% 值、 auto ，默认值为150 width String/int Grid 的宽度，如果未设置，则宽 度应为所有列宽的之和；如果设 置了宽度，则每列的宽度将会根 据 shrinkToFit选项的设置，进 行设置 shrinkToFit bool 此选项用于根据width计算每列

4、 宽度的算法。默认值为true 。如 果 shrinkToFit为 true 且设置了 width值，则 每 列宽 度 会 根 据 width成 比 例 缩 放 ； 如 果 shrinkToFit为 false且设置了 width值，则每列的宽度不会成 比例缩放，而是保持原有设置， 而 Grid 将会有水平滚动条 shrinkToFit: false , autowidth bool是否自动设置宽度autowidth: true , pager string定义页码控制条Page Bar pager: #pjqgajax, sortname string指定默认的排序列，可以是列名 也可以是数

5、字。此参数会在被传 递到 Server 端 sortname: invdate, viewrecords bool 设置是否在Pager Bar显示所有 记录的总数 viewrecords: true , caption stringGrid 的标题。如果设置了，则将 显示在 Grid 的 Header 层 caption: jqGrid标题 , rowNum int 用于设置Grid中一次显示的行 数，默认值为20。正是这个选项 将参数rows（prmNames中设置 的）通过 url选项设置的链接传 递到Server 。注意如果Server 返回的数据行数超过了rowNum 的 设 定 ，

6、 则Grid也 只 显 示 rowNum设定的行数 rowNum: 20, rowList Array 一个数组，用于设置Grid可以 接受的 rowNum值 rowList: 10, 20, 30, 50, colNames Array 字符串数组，用于指定各列的题 头文本，与列的顺序是对应的 colNames: 物料 , 代码 , 内码 , colModel object 用 于 设 定 各 列 的 参 数 . 祥 细 见 1.1.1 colModel: name: FMaterialNumber, index: FMaterialNumber, width: 150, sortable:

7、 true , name: FMaterialName, index: FMaterialName, width: 150, sortable: true , prmNames object 用于设置jqGrid将要向 Server 传递的参数名称 . 祥细见 1.1.2 prmNames: page: “page“ , rows: “rows“ jsonReader object 设定如何解析从Server端发回 来的 json 数据 . 祥细见 1.1.3 jsonReader: root: “rows“ ,page: “page“ grouping bool是否显示分组，true为显示，

8、 默认值为 :false grouping: true , groupingView object 分组设置 .祥细见 1.1.4 groupingView: groupField: FBillNo, FSupplyIDName , groupColumnShow: true multiselect boolean 定 义 是 否 可 以 多 选 . 默 认 值 ： false multiselect: true , multiboxonly boolean 只有当multiselect = true.起 作用，当 multiboxonly 为 ture 时只有选择checkbox 才会起作

9、用. 默认值：false multiboxonly: true , multiselectWid th int 当 multiselect为 true时设置 multiselect列宽度 . 默认值： 20 multiselectWidth:20, page int 设置初始的页码 . 默认值： 1 page:1, pager String/jquery 指定分页栏对象，必须为一个有 效 的html元 素 。 可 以 是 pager, #pager, jQuery(#pager).推荐用 #pager pager: #pjqgajax, pagerpos string 指 定 分 页 栏 的

10、位 置 . 值 为 : left,center(默认值 ),right pagerpos: center , pgbuttons boolean 是否显示翻页按钮. 默认值： true pginput boolean 是否显示跳转页面的输入框. 默 认值：true pgtext string 当前页信息语言包中设置 prmNames array 当参数为null时不会被发到服 务器端 . 默认值： none prmNames :page: page ,r ows: rows, sort: sidx,order: sord, search: _search, nd: nd , npage:nul

11、l postData array 此数组内容直接赋值到url上， 参数类型： name1:value1 , 空 array jQuery( “#jqgajax“).jqGri d(setGridParam, postD ata: sesKey:escape($( “#hfsesKey“ ).val(),pid :escape($( “#hfParIDs“). val(),n :escape($( “#cb Name“ ).val(),v :escape ($( “#tbVal“).val(),pag e:1).trigger(“reloadGri d“); 1.1.1.colModel设定各列

12、的参数 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、rn name: FInterID, index st

13、ring设置排序时所使用的索引名称， 这个 index 名称会作为sidx 参数 （ prmNames中设 置 的 ）传递到 Server 。 index: FInterID, labelstring 当 jqGrid 的 colNames选项数组为 空 时 ， 为各 列 指 定题 头 。如果 colNames 和此项都为空时，则 name选项值会成为题头 widthint设置列的宽度，目前只能接受以 px 为单位的数值，默认为150 width: 80, sortablebool设置该列是否可以排序，默认为 true sortable: true , searchbool设置该列是否可以被列

14、为搜索条 件，默认为true search: true , resizablebool设置列是否可以变更尺寸，默认 resizable: true , 为 true 。 hiddenbool设置此列初始化时是否为隐藏状 态，默认为false hidden: false , alignstring 显示文字的方式，值为: left( 默 认值 ),center,right align: “right“, formatterstring预设类型或用来格式化该列的自 定义函数名。常用预设格式有： integer、 date 、 currency、 number 等, （具体参见文档） 。 forma

15、tter: number , formatoptionsobject 格式化显示列数据 formatoptions: decimalSeparator: “.“ , thousandsSeparator: “,“ , decimalPlaces: 4, prefix: “ summaryType string 如果汇总页脚行启用，在列模式 下设置汇总字段的类型 值 列 表 : sum(求 合 ), count(汇 总), avg(平均值 ), min, max 详细信息 summaryType:sum summaryTpl string 此选项作为模板可用于在总结页 脚行。默认情况下，它的价值

16、被 定义为 0 - 这意味着，这将打 印的汇总值。该参数可以包含任 何有效的 HTML 代码。 详细信息 summaryTpl: (0) 小计: classes string 设置列的 css。多个 class 之间用 空 格 分 隔， 如 ： class1 class2 。表格默认的css 属性 是 ui-ellipsis datefmt string 对日期列进行格式化。”/ ”, ” - ”, and ” . ”都是有效的日期 分隔符。 y,Y,yyyy 年 YY, yy 月 m,mm for monthsd,dd 日. ISO Date (Y-m-d) defval string 查询

17、字段的默认值 editable boolean 单 元 格 是 否 可 编 辑 . 默 认 值 ： false editoptions array 对列进行编辑时设置的一些属性 editrules array 对于可编辑单元格的一些额外属 性设置 edittype string 可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file,custom fixed boolean 列宽度是否要固定不可变. 默认 值：false formoptions array 对于 form 进行编辑时的属性设置

18、 formatoptions array 对某些列进行格式化的设置 formatter mixed 对列进行格式化时设置的函数名 或者类型 hidedlg boolean 是否显示或者隐藏此列. 默认值： false index string 当排序时定义排序字段名称的索 引，参数名为sidx jsonmap string 定义了返回的json 数据映射 key boolean 当从服务器端返回的数据中没有 id时，将此作为唯一rowid使 用，默认只能有一个id属性 . 默 认值：false search boolean 在搜索模式下，定义此列是否可 以作为搜索列 .默认值：true sea

19、rchoptions array 设置搜索参数 sorttype string 用在当 datatype为 local时，定 义 搜 索 列 的 类 型 ， 可 选 值 ： int/integer - 对 integer排序 float/number/currency - 排 序 数字 date - 排序日期 text - 排 序文本 . 默认值： text stype string 定义搜索元素的类型. 默认值： text surl string 搜索数据时的url cellattr function 此功能属性添加到细胞的过程中 创造的数据 - 即动态。例如表格 单元格的所有有效的属性，可

20、以 使用或与不同性质的风格属性。 函数应该返回字符串。传递给这 个函数的参数是：ROWID - 行 ID VAL - 这将是在细胞内的增值 rawObject - 数据行的原始对象 - 也 就 是说 ， 如 果数 据 类型是 JSON - 数组，如果数据类型是 XML XML 节点。 null CM - 此列所有在 colModel 中列出 的属性 RDATA - 这将是在该行插入的数 据 行 。 此参 数 是 数组 类 型的名 称 ： 价 值 ， 其 中name 是 在 colModel 的名称 firstsortorder string 如果设置为ASC或 DESC ，将被列 在 这 个

21、方 向 排 序 列 第 一 sort.Subsequent各种像往常一 样将切换 null hidden boolean 定义如果此列是隐藏在初始化。false template object设置有效的colModel 属性。如果 你想在方便的列模型覆盖了很多 的默认值，可以使用此选项。在 网格选项，请参阅cmTemplate null title boolean 如果此选项是假的标题是不会显 示在该列，当我们悬停用鼠标一 个细胞 true xmlmap string 定义 XML映射进来的XML文件中 列。使用一个CCS 规范检索数据 none unformat function “ UNF

22、ORMAT”编辑请参阅自定义 格式化的单元格的值时的自定义 功能。 （UNFORMAT也称为排序操 作期间由 UNFORMAT返回的值是在 排序过程中比较值。） null viewable boolean 只 有 当 viewGridRow方 法 被 激 活，此选项才有效。当选项设置 为 false的列是不会出现在视图 的形式 True 1.1.2.groupingView分组设置 1.1.3.groupingView分组设置 1.1.4.groupingView分组设置 jQuery(“#grid“).jqGrid( . groupingView : groupField : name, g

23、roupDataSorted : true . ); 属性 : 名称值类型说明实列 groupFieldArraycolModel定义的名称。实现分 组的 Key，级别从左至右，目前 支持 1 级 groupField: name , groupOrderArray定义组级别的初始排序顺序。 默认值是 ASC 。 groupOrder: asc , groupTextArray 将 显 示 在 网 格 中 的 分 组 头 文 字。默认情况下，如果定义的 值 0 这意味着组值名称将显 示。如果指定1 ，那么将显示 分组行总数。它是可以在这里 设置任何有效的HTML内容。 groupText: 0

24、 - 1 条记录 , groupColumnShowArray显示 / 隐藏列，如果启用了分 组，我们将此值设置为true groupColumnShow: true , groupSummaryArray启用或禁用当前组的水平（页 脚）行的总结。如果设置了分 组，该组的默认值是false 。 groupSummary: true , showSummaryOnHidebool当折叠组时，是否显示或隐藏 小计（页脚）行， showSummaryOnHide: true , groupDataSortedbool如果这个参数设置为true ，将 发送到服务器的额外的参数， 以告诉他对数据进行排序

25、。 groupDataSorted: true , groupCollapsebool初始化时是否显示或隐藏组的 详细行 groupCollapse: false , plusiconstring收缩时的图标样式ui-icon-circlesmall-plus minusicon string展开时的图标样式 ui-icon-circlesmall-minus 2. 方法 Methods 2.1.addRowData编辑行 jQuery( “#grid_id“). addRowData(rowid,rdata,pos,src); 实例: $( “#gvBillEntry“).addRowDat

26、a(rowid, , “ first“); 属性 : 名称值类型说明实列 rowidint该行的 ID 编号 rdata bool新增时行初始化数据。 posfunction 新增类型： pos 可以为 first(插入顶行 ),last(插入 尾行 默认值 ),before,after, 为后两者是需要指定相对的行 ID Pos: last srcstring如果 pos: 弹出的新增页面 2.2.editRow 编辑行 jQuery( “#grid_id“).editRow(rowid, keys, oneditfunc, succesfunc, url, extraparam, afte

27、rsavefunc, 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); 属性 : 名称值类型说明实列

28、 rowidint该行的 ID 编号 keys bool设置为true时，我们可以使用 Enter键来保存该行Esc 键 取消编辑。 oneditfuncfunction 成功访问编辑行之前，允许用 户输入字段的访问后，火灾。 行的 ID 作为参数传递给这个函 数的一个参数。 succesfuncstring如果定义，这个函数被调用 后，立即请求成功。此功能是 通过从服务器返回的数据。根 据从服务器的数据，这个函数 应该返回 true或 false 。 urlstring如果定义，该参数将替换从选 项数组 editurl参数。如果设置 为“ clientArray”，数据是不 向服务器发送，而

29、是保存网格 （大概后手动储蓄）。 extraparamstring名称类型的数组：值。当设置 这些值一起发布到服务器的其 他值。 aftersavefuncstring如果定义，该函数被调用后的 数据保存到服务器。传递给这 个函数的参数的rowid 和从服务 器请求的响应。事件被称为太 URL时设置为 “clientArray”。 errorfuncstring如果定义，该函数被调用后的 数据保存到服务器。传递给这 个函数的参数的rowid 和从服务 器请求的响应 afterrestorefuncstring如果定义，在restoreRow调用 这个函数， （如果该行没有成功 保存）后恢复行方

30、法。这个函 数，我们通过ROWID 3. 事件 事件 : 名称参数说明 afterInsertRow Rowid,rowdata,rowel em 当插入每行时触发。rowid 插入当前行的id ；rowdata 插入 行的数据，格式为name: value ，name为 colModel 中的名 字 beforeRequest none 向服务器端发起请求之前触发此事件但如果datatype是一 个 function时例外 beforeSelectRow rowid, e 当用户点击当前行在未选择此行时触发。rowid ：此行 id ； e：事件对象。返回值为ture或者 false 。如果

31、返回true 则选择完成，如果返回false则不会选择此行也不会触发 其他事件 gridComplete none 当表格所有数据都加载完成而且其他的处理也都完成时触 发此事件，排序，翻页同样也会触发此事件 loadComplete xhr 当从服务器返回响应时执行，xhr ：XMLHttpRequest 对象 loadError xhr,status,error 如果请求服务器失败则调用此方法。xhr ：XMLHttpRequest 对象； satus ：错误类型，字符串类型；error ：exception 对象 onCellSelect rowid,iCol,cellcont ent,e

32、 当点击单元格时触发。rowid ：当前行 id ；iCol ：当前单元 格索引； cellContent：当前单元格内容；e：event 对象 ondblClickRow rowid,iRow,iCol,e 双击行时触发。rowid ：当前行id ；iRow：当前行索引位 置；iCol ：当前单元格位置索引；e:event对象 onHeaderClick gridstate 当点击显示 / 隐藏表格的那个按钮时触发；gridstate：表 格状态，可选值：visible or hidden onPaging pgButton 点击翻页按钮填充数据之前触发此事件，同样当输入页码 跳转页面时也会

33、触发此事件 onRightClickRow rowid,iRow,iCol,e 在行上右击鼠标时触发此事件。rowid ：当前行 id ；iRow： 当前行位置索引；iCol ：当前单元格位置索引；e：event 对象。此事件不支持opera 游览器 onSelectAll aRowids,status multiselect为 ture ，且点击头部的checkbox 时才会触发 此事件。 aRowids：所有选中行的id集合，为一个数组。 status ：boolean 变量说明checkbox 的选择状态， true选 中 false不选中。无论checkbox 是否选择， aRowid

34、s 始终 有值 onSelectRow rowid,status 当选择行时触发此事件。rowid ：当前行 id ；status ：选择 状态，当 multiselect 为 true时此参数才可用 onSortCol index,iCol,sortorde r 当 点击排 序列但是数据还未进 行变化 时触发此事件。 index ：name在 colModel中位置索引； iCol ：当前单元格 位置索引； sortorder：排序状态： desc 或者 asc resizeStart event, index 当开始改变一个列宽度时触发此事件。event ： event对 象；index

35、：当前列在colModel 中位置索引 resizeStop newwidth, index 当列宽度改变之后触发此事件。newwidth ：列改变后的宽 度；index ：当前列在colModel 中的位置索引 serializeGridData postData 向服务器发起请求时会把数据进行序列化，用户自定义数 据也可以被提交到服务器端 4. 方法 方法 : 名称返回值参数说明 addJSONDatanonedata使用传来的 data 数据填充表格。 使用方法 ：var mygrid = jQuery(”#” +grid_id)0;var myjsongrid = eval(”( ”

36、+jsonresponse.responseText+”) ”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; addRowData Bool ( 成 功 true,否 则 false) rowid,data, position, srcrowid 根据参数插入一行新的数据，rowid 为新行的 id ， data 为新行的数据，position为新增行的位置， srcrowid 为新增行的参考位置。 data 数据格式 ：name1:value1,name2: value2 , name 为在

37、colModel 中指定的名称 addXMLData none data 根据传来的数据填充表格。 使用方法 ：var mygrid = jQuery(”#” +grid_id)0; mygrid.addXmlData(xmlresponse.responseXML); clearGridData jqGrid对 象 clearfooter 清除表格当前加载的数据。如果clearfooter为 true 时则此方法删除表格最后一行的数据 delRowData Bool ( 成 功 true,否 则 false) rowid 根据 rowid 删除行，但不会从服务器端删除数据 footerDat

38、a jgGrid对 象 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

39、中的位置索引也可以是name 值。注意：在编辑行或者单元格时不能使用此方 法，此时返回的并不是改变的值，而是原始值 getCol array or value colname, returntype, mathoperation 返回列的值。 colname既可以是当前列在colModel 中的位置索引也可以是name 值。 returntype指定 返回数据的类型，默认为false 。当为 false 时， 返回的数组中只包含列的值，当为true 时返回数 组是对象数组，具体格式 id:rowid, value:cellvalue ，id 为行的 id ，value 为列的 值。如： id:

40、1,value:1,id:2,value:2, 。 mathoperation 可选值为 sum, avg, count getDataIDs array none 返回当前 grid 里所有数据的 id getGridParam mixed value name 返回请求的参数信息 getInd mixed rowid,rowconten t 如果 rowcontent 为false ，返回行所在的索引位 置， id 为行 id 。rowcontent 默认为 false 。如果 rowconent 为ture 则返回的为行对象，如果找不到 行则返回 false getRowData arr

41、ay rowid or none 返回指定行的数据，返回数据类型为 name:value ，name 为colModel 中的名称， value 为 所在行的列的值，如果根据rowid 找不到则返回 空。在编辑模式下不能用此方法来获取数据，它 得到的并不是编辑后的值 hideCol jqGrid对 象 colnameorcolna mes 如果参数为一个列名则隐藏此列，如果给定的是 数组则隐藏指定的所有列。格式： “name1 ”,”name2 ” remapColumns none permutation, updateCells, keepHeader 调整表格列的显示顺序,permuta

42、tion为当前列的 顺序，假如值是1,0,2，那么第一列就会在第二 位显示。如果 updateCells 为ture 则是对单元格数 据进行重新排序，如果keepHeader为true 则对 header 数据显示位置进行调整 resetSelection jqGrid对 象 none 选择或者反选行数据，在多选模式下也同样起作 用 setCaption jqGrid对 象 caption 设置表格的标题 setCell jqGrid对 象 rowid,colname, data, class, properties 改变单元格的值。rowid ：当前行 id ；colname： 列名称，也可

43、以是列的位置索引，从0开始； data ：改变单元格的内容，如果为空则不更新； class ：如果是 string则会使用 addClass 方法将其 加入到单元格的css中，如果是 array 则会直接加 到style 属性中； properties：设置单元格属性 setGridParam jqGrid对 象 object 设置 grid 的参数。有些参数的修改必须要重新加 载grid 才可以生效，这个方法可以覆盖事件 setGridHeight jqGrid对 象 new_height 动态改变 grid 的高度，只能对单元格的高度进行 设置而不能对表格的高度进行动态修改。 new_he

44、ight ：可以是象素值，百分比或者“auto“ setGridWidth jqGrid对 象 new_width,shrin k 动态改变表格的宽度。new_width: 表格宽度，象 素值； shrink ：true 或者 false ，作用同 shrinkToFit setLabel jqGrid对 象 colname, data, class, 给指定列设置一个新的显示名称。colname：列名 称，也可以是列的位置索引，从0开始； data ：列 properties 显示名称，如果为空则不修改；class ：如果是 string则会使用 addClass 方法将其加入到单元格 的c

45、ss中，如果是 array 则会直接加到 style 属性 中； properties：设置 label 的属性 setRowData Bool ( 成 功 true,否 则 false) rowid,data, cssprop 更新行的值， rowid 为行 id 。data 值格式： name1:value1,name2: value2, name为 colModel 中名称； cssprop ：如果是 string则会使 用addClass 方法将其加入到行的css中，如果是 array 或者对象则会直接加到style 属性中 setSelection jqGrid对 象 rowid,o

46、nselectr ow 选择或反选指定行。如果onselectrow 为ture 则会 触发事件 onSelectRow，onselectrow 默认为 ture showCol jqGrid colname 显示列。 colname可以是数组 “name1 ”, ” name2 ”, 但是 name1 或者 name2 必须是 colModel 中 的name trigger(“ reloadGrid” ) jqGrid对 象 none 重新加载当前表格，也会向服务器发起新的请求 updateColumns none none 同步表格的宽度，用在表格拖拽时，用法：var mygrid=jQ

47、uery(“#grid_id”)0;mygrid.updat eColumns(); 4.1.1.getGridParam Option Returns getGridParam(“url“) the current url from options array getGridParam(“sortname“) the name of last sorted column getGridParam(“sortorder“) the last sorted order getGridParam(“selrow“) the id of the selected row, null if row i

48、s not selected getGridParam(“page“) the current page number. getGridParam(“rowNum“) the current number of requested rows getGridParam(“datatype“) the current datatype. getGridParam(“records“) the current number of records in grid. getGridParam(“selarrrow“) array of ids of the selected rows when mult

49、iselect options is true. Empty array if not selection. reccount setGridParam Method Description setGridParam(url:newvalue) Parameters: url - string Set a new url, replacing the older. setGridParam(sortname:newvalue) Parameters: sortname - string Set a new sort name setGridParam(sortorder:newvalue) Parameters: so