JgGrid 参数详解_免费下载.docx

在$(#tableId).jqGrid(optional);中，optional对象包含如下的属性：（属性按字母顺序排列）参数名称类型描述默认值是否可以被修改ajaxGridOptionsobject对ajax参数进行全局设置，可以覆盖ajax事件：error，complete 和 beforeSend 空值是ajaxGridOptionsobject对ajax参数进行全局设置空值是ajaxSelectOptionsobject对ajax的select参数进行全局设置，设置editoptions跟searchoptions 参数的select属性值空值是altclassString用于表格行交替变色的class属性。你可以定义自己的class来替代默认值。只有当altRows属性设置为true时，该属性才起作用ui-priority-secondary是，但需要重新加载altRowsboolean设置表格是否允许行交替变色值false是，需重新加载autoencodeboolean当为 ture 时对url进行编码false是autowidthboolean如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth false否captionString定义表格名称空值否，但是可以用api修改cellLayoutinteger定义了单元格padding + border 宽度。通常不必修改此值。初始值为5，paddingLef?2+paddingRight?2+borderLeft?1=55否cellEditboolean启用或者禁用单元格编辑功能false是cellsubmitString定义了单元格内容保存位置：“remote”，“clientArray”remote是cellurlString单元格提交的url空值是colModelarray对显示列属性的设置，是一个数组对象。常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序空值否colNamesarray放置列名称的数组，必须与colModel大小相同空数组否datastrStringxmlstring或者jsonstring空值是datatypestring从服务器端返回的数据类型，（表格期望接收的数据类型）。可选类型：xml，xmlstring，json，local，function xml是deselectAfterSortboolean只有当datatype为local时起作用。当排序时不选择当前行true是directionstring表格中文字的显示方向，从左向右（ltr）或者从右向左（rtr）。ltr否editurlstring定义对form编辑时的url空值是emptyrecordsstring当返回的数据行数为0时显示的信息。只有当属性 viewrecords 设置为ture时起作用在语言包中是ExpandColClickboolean当为true时，点击展开行的文本时，treeGrid就能展开或者收缩，不仅仅是点击图片true否ExpandColumnstring指定那列来展开tree grid，默认为第一列，只有在treeGrid为true时起作用空值否footerrowboolean当为true时，会在翻页栏之上增加一行false否forceFitboolean当为ture时，调整列宽度不会改变表格的宽度。当shrinkToFit 为false时，此属性会被忽略false否gridstatestring定义当前表格的状态：visible or hiddenvisible否gridviewboolean构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用false是heightmixed表格高度，可以是数字，像素值或者百分比150否hiddengridboolean当为ture时，表格不会被显示，只显示表格的标题。只有当点击显示表格的那个按钮时才会去初始化表格数据。只有当caption 属性不为空而且hidegrid为ture时才起作用false否hidegridboolean启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效true否hoverrowsboolean当为false时mouse hovering会被禁用false是jsonReaderarray描述json期望数据格式的数组。否lastpageinteger只读属性，定义了总页数0否lastsortinteger只读属性，定义了最后排序列的索引，从0开始0否loadonceboolean如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用false否loadtextstring当请求或者排序时所显示的文字内容Loading.否loaduistring当执行ajax请求时要干什么。disable禁用ajax执行提示；enable默认，当执行ajax请求时的提示； block启用Loading提示，但是阻止其他操作enable是mtypestring请求的类型：(“POST” or “GET”)GET是multikeystring只有在multiselect设置为ture时起作用，定义使用那个key来做多选。shiftKey，altKey，ctrlKey 空值是multiboxonlyboolean只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用，false是multiselectboolean定义是否可以多选false否multiselectWidthinteger当multiselect为true时设置multiselect列宽度20否pageinteger设置初始的页码1是pagermixed指定分页栏对象，必须为一个有效的html元素。可以是pager, #pager, jQuery(#pager).推荐用#pager空值否pagerposstring指定分页栏的位置center否pgbuttonsboolean是否显示翻页按钮true否pginputboolean是否显示跳转页面的输入框true否pgtextstring当前页信息语言包中设置是prmNamesarrayDefault valuesprmNames: page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null 当参数为null时不会被发到服务器端none是postDataarray此数组内容直接赋值到url上，参数类型：name1:value1空array是reccountinteger只读属性，定义了grid中确切的行数。通常情况下与records属性相同，但有一种情况例外，假如rowNum=15，但是从服务器端返回的记录数是20，那么records值是20，但reccount值仍然为15，而且表格中也只显示15条记录。0否recordposstring定义了记录信息的位置： left, center, rightright否recordsinteger只读属性，定义了返回的记录数none否recordtextstring显示记录数信息。0 为记录数开始，1为记录数结束。 viewrecords为ture时才能起效，且总记录数大于0时才会显示此信息语言包是resizeclassstring定义一个class到一个列上用来显示列宽度调整时的效果空值否rowListarray一个数组用来调整表格显示的记录数，此参数值会替代rowNum参数值传给服务器端。如果为空则不显示，设置格式：10,20,30。否rownumbersboolean如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为rn.false否rowNuminteger设置表格中显示的记录数，参数会被自动传到后台。如果此参数设为10，但是从服务器端返回15条记录，那么在表格中只会显示10条记录。如果设为-1则禁用此检查20是rownumWidthinteger如果rownumbers为true，则可以设置column的宽度25否savedRowarray只读属性，只用在编辑模式下保存数据空值否scrollboolean or integer创建一个动态滚动的表格，当为true时，翻页栏被禁用，使用垂直滚动条加载数据，且在首次访问服务器端时将加载所有数据到客户端。当此参数为数字时，表格只控制可见的几行，所有数据都在这几行中加载false否scrollOffsetinteger设置垂直滚动条宽度18否scrollrowsboolean当为true时让所选择的行可见false是selarrrowarray-只读属性，用来存放当前选择的行empty array 否selrowstring只读属性，最后选择行的idnull否shrinkToFitboolean此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度true否sortableboolean是否可排序false否sortnamestring排序列的名称，此参数会被传到后台空字符串是sortorderstring排序顺序，升序或者降序（asc or desc）asc是subGridboolean是否使用suggridfalse否subGridModelarray-subgrid模型empty array否subGridTypemixed如果为空则使用表格的dataTypenull是subGridUrlstring加载subgrid数据的url，jqGrid会把每行的id值加到url中空值是subGridWidthintegersubgrid列的宽度20否toolbararray表 格的工具栏。数组中有两个值，第一个为是否启用，第二个指定工具栏位置（相对于body layer），如：true,”both” 。工具栏位置可选值：“top”,”bottom”, “both”. 如果工具栏在上面，则工具栏id为“t_”+表格id；如果在下面则为 “tb_”+表格id；如果只有一个工具栏则为 “t_”+表格idfalse, 否totaltimeinteger只读属性，计算加载数据的时间。目前支持xml跟json数据0否treedatatypemixed数据类型，通常情况下与datatype相同，不会变null否treeGridboolean启用或者禁用treegrid模式false否treeGridModelstringtreeGrid所使用的方法nested否treeIconsarray树的图标，默认值：plus:ui-icon-triangle-1-e,minus:ui-icon-triangle-1-s,leaf:ui-icon-radio-off 否treeReaderarray扩展表格的colModel且加在colModel定义的后面否tree_root_levelnumericroot元素的级别，0否urlstringurlnull是userDataarray从request中取得的一些用户信息empty array否userDataOnFooterboolean当为true时把userData放到底部，用法：如果userData的值与colModel的值相同，那么此列就显示正确的值，如果不等那么此列就为空false是viewrecordsboolean是否要显示总记录数false否viewsortcolsarray定 义排序列的外观跟行为。数据格式：false,vertical,true.第一个参数是说，是否都要显示排序列的图标，false就是只显示当 前排序列的图标；第二个参数是指图标如何显示，vertical：排序图标垂直放置，horizontal：排序图标水平放置；第三个参数指单击功 能，true：单击列可排序，false：单击图标排序。说明：如果第三个参数为false则第一个参数必须为ture否则不能排序否widthnumber如果设置则按此设置为主，如果没有设置则按colModel中定义的宽度计算none否xmlReaderarray对xml数据结构的描述否另外 还列出了常用的参数。如下： url获取数据的地址datatype从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientsidemtypeajax提交方式。POST或者GET，默认GETcolNames列显示名称，是一个数组对象。colModel对显示列属性的设置，是一个数组对象。常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序pager定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置rowNum在grid上显示记录条数，这个参数是要被传递到后台rowList一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台sortname默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台viewrecords定义是否要显示总记录数caption表格名称另外，“是否可以被修改”的意思是：在表格创建后，参数是否能够或不能够被修改。换言之，在表格中的初始默认值能否被修改。设置全局参数：有时，我们想改变参数的默认值，且希望这种改变能够同时运用于多个表格。此时，我们可以使用jQuery的extend函数实现。这里给一个例子：假设你想有一个行交替变色的表格，且希望所有的表格都是如此，并且，你不想每次（每构建一个表格）都配置相同的参数。这时你可以使用这种方式，只需配置一次即可。My First Gridhtml, body margin: 0;padding: 0;font-size: 75%;/ Here we set a globally the altRows optionjQuery.extend(jQuery.jgrid.defaults, altRows:true );jQuery(document).ready(function()jQuery(#list).jqGrid(url:example.php,.你也可以增加其他你想设置的参数。覆盖全局参数：在上面的例子中，我们学习了如何为你的应用程序中所有的表格设置共用的参数。然而，有些表格可能需要用其他的参数值，即需要对我们上，面设置的全局参数进行改变，以用于特定的表格。这时，我们可以把相应的参数改过来，即在特定的表格重新配置一次相应的属性。例如：My First Gridhtml, body margin: 0;padding: 0;font-size: 75%;/ Here we set a globally the altRows optionjQuery.extend(jQuery.jgrid.defaults, altRows:true );jQuery(document).ready(function()jQuery(#list).jqGrid(url:example.php,/ here we do not want zebra for this gridaltRows: false,.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; if onselectrow is 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 can set class or style properties. Where: rowid the id of the row, colname the name of the column (this parameter can be a number (the index of the column) beginning from 0 data the content that can be put into the cell. If empty string the content will not be changed class if class is string then we add a class to the cell using addClass; if class is an array we set the new css properties via css properties sets the attribute properies of the cell, forceup If the parameter is set to true we perform update of the cell instead that the value is empty 8.获取选中行IDvar rowid = $(#jqgrid).jqGrid(getGridParam,selrow); var rowid = $(#searchResultList).getGridParam(selrow);var rowData = $(#searchResultList).getRowData(rowid); /根据行ID，获取选中行的数据(根据)=重点讲解=1.1 prmNames选项prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。其默认值为：view plain1. prmNames : 2. page:page, / 表示请求页码的参数名称 3. rows:rows, / 表示请求行数的参数名称 4. sort: sidx, / 表示用于排序的列名的参数名称 5. order: sord, / 表示采用的排序方式的参数名称 6. search:_search, / 表示是否是搜索请求的参数名称 7. nd:nd, / 表示已经发送请求的次数的参数名称 8. id:id, / 表示当在编辑数据模块中发送数据时，使用的id的名称 9. oper:oper, / operation参数名称（我暂时还没用到） 10. editoper:edit, / 当在edit模式中提交数据时，操作的名称 11. addoper:add, / 当在add模式中提交数据时，操作的名称 12. deloper:del, / 当在delete模式中提交数据时，操作的名称 13. subgridid:id, / 当点击以载入数据到子表时，传递的数据名称 14. npage: null, 15. totalrows:totalrows / 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal 16. 可以通过这个选项来自定义当向Server发送请求时，默认发送的参数名称。这 个参数很重要也很有用，正是通过这个参数，可以方便的改变默认的request的参数，以符合Server端的需要。比如在prmNames中 search默认的值为_search，这在Struts2的Action中不太方便命名成员变量和getter/ setter。因此可以使用 prmNames: search: search 来改变这一默认值为search，这在Struts2的Action对象中就很好设置getter/ setter了，即getSearch()和setSearch()。当然其他名字也是可以的。1.2 jsonReader选项jsonReader是jqGrid的一个重要选项，用于设置如何解析从Server端发回来的json数据。其默认值为：view plain1. jsonReader : 2. root: rows, / json中代表实际模型数据的入口 3. page: page, / json中代表当前页码的数据 4. total: total, / json中代表页码总数的数据 5. records: records, / json中代表数据行总数的数据 6. repeatitems: true, / 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。 7. cell: cell, 8. id: id, 9. userdata: userdata, 10. subgrid: 11. root:rows, 12. repeatitems: true, 13. cell:cell 14. 15. 可 以这样理解，prmNames设置了如何将Grid所需要的参数传给Server，而jsonReader设置了如何去解析从Server端传回来的 json数据。如果没有设置jsonReader的话，jqGrid将会根据默认的设置来解析json数据，并显示在表格里。但如果传回来的json数 据，不太符合默认设置（比如内部的结构名不太一样），那么就有必要修改这一设置。比如：view plain1. jsonReader: 2. root:gridModel, 3. page: page, 4. total: total, 5. records: record, 6. repeatitems : false 7. 注1：据其他网友的文章，如果设置repeatitems为false，不但数据可以乱序，而且不用每个数据元素都要具备，用到哪个找到哪个就可以了。实验却是如此。注2：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构。援引文档中的例子：repeatitems为true时：view plain1. jQuery(#gridid).jqGrid( 2. . 3. jsonReader : 4. root:invdata, 5. page: currpage, 6. total: totalpages, 7. records: totalrecords 8. , 9. . 10. ); json结构为：view plain1. 2. totalpages: xxx, 3. currpage: yyy, 4. totalrecords: zzz, 5. invdata : 6. id :1, cell :cell11, cell12, cell13, / cell中不需要各列的name，只要值就OK了，但是需要保持对应 7. id :2, cell :cell21, cell22, cell23, 8. . 9. 10. repeatitems为false时：view plain1. jQuery(#gridid).jqGrid( 2. . 3. jsonReader : 4. root:invdata, 5. page: currpage, 6. total: totalpages, 7. records: totalrecords, 8. repeatitems: false, 9. id: 0 10. , 11. . 12. ); json结构为：view plain1. 2. totalpages : xxx, 3. currpage : yyy, 4. totalrecords : zzz, 5. invdata : 6. invid : 1,invdate:cell11, amount :cell12, tax :cell13, total :1234, note :somenote, / 数据中需要各列的name，但是可以不按列的顺序 7. invid : 2,invdate:cell21, amount :cell22, tax :cell23, total :2345, note :some note, 8. . 9. 10. 2. colModel的重要选项 和jqGrid一样colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。 name ：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。 index ：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。 label ：当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头。 width ：设置列的宽度，目前只能接受以px为单位的数值，默认为150。 sortable ：设置该列是否可以排序，默认为true。 search ：设置该列是否可以被列为搜索条件，默认为true。 resizable ：设置列是否可以变更尺寸，默认为true。 hidden ：设置此列初始化时是否为隐藏状态，默认为false。 formatter ：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档 ）。3. 第一个实例3.1 服务器端用于提供数据的Action。为了可以复用这种专门接受jqGrid传来参数的Action，我抽象出一个基本类。具体代码如下：view plain1. package cn.gengv.struts2ex.jqGrid; 2. 3. import java.util.Collections; 4. import java.util.List; 5. import com.opensymphony.xwork2.ActionSupport; 6. 7. SuppressWarnings(serial) 8. public abstract class JqGridBaseAction extends ActionSupport 9. / 和jqGrid组件相关的参数属性 10. private List gridModel = Collections.emptyList(); 11. private Integer rows = 0; 12. private Integer page = 0; 13. private Integer total = 0; 14. private Integer record = 0; 15. private String sord; 16. private String sidx; 17. private String search; 18. 19. public abstract int getResultSize(); 20. 21. public abstract List listResults(int from, int length); 22. 23. public String refreshGridModel() 24. try 25. List results = Collections.emptyList(); 26. record = this.getResultSize(); 27. int from = rows * (page - 1); 28. int length = rows; 29. results = this.listResults(from, length); 30. this.setGridModel(results); 31. total = (int) Math.ceil(double) record / (double) rows); 32. return SUCCESS; 33. catch (Exception e) 34. e.printStackTrace(); 35. this.addActionError(e.getMessage(); 36. return ERROR; 37. 38. 39. 40. public List getGridModel() 41. return gridModel; 42. 43. public void setGridModel(List gridModel) 44. this.gridModel = gridModel; 45. 46. public Integer getRows() 47. return rows; 48. 49. public void setRows(Integer rows) 50. this.rows = rows; 51. 52. public Integer getPage() 53. return page; 54. 55. public void setPage(Integer page) 56. this.page = page; 57. 58. public Integer getTotal() 59. return total; 60. 61. public void setTotal(Integer total) 62. this.total = total; 63. 64. public Integer getRecord() 65. return record; 66. 67. public void setRecord(Integer record