jQuery 学习笔记--jqGrid ⽅法列表官⽅⽂档!
jqGrid 官⽅⽂档:
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 can set class or style properties. Where:
rowidthe id of the row,
colnamethe name of the column (this parameter can be a number (the index of the column) beginning from 0datathe content that can be put into the cell. If empty string the content will not be changed classif 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 propertiessets the attribute properies of the cell,forceupIf the parameter is set to true we perform update of the cell instead that the value is empty
8.获取选中⾏ID
抽象类和接口的关系var rowid = $("#jqgrid").jqGrid('getGridParam','selrow');
var rowid = $("#searchResultList").getGridParam("selrow");
var rowData = $("#searchResultList").getRowData(rowid); /根据⾏ID ，获取选中⾏的数据(根据)
=================重点讲解================
1.1 prmNames 选项
prmNames 是jqGrid 的⼀个重要选项，⽤于设置jqGrid 将要向Server 传递的参数名称。其默认值为：
可以通过这个选项来⾃定义当向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 数据。其默认值为：
01. prmNames : {02. page:"page", // 表⽰请求页码的参数名称03. rows:"rows", // 表⽰请求⾏数的参数名称04. sort:"sidx",// 表⽰⽤于排序的列名的参数名称05. order:"sord",// 表⽰采⽤的排序⽅式的参数名称06. search:"_search",// 表⽰是否是搜索请求的参数名称07. nd:"nd",// 表⽰已经发送请求的次数的参数名称08. id:"id",// 表⽰当在编辑数据模块中发送数据时，使⽤的id 的名称09. ope
r:"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. }
可以这样理解，prmNames 设置了如何将Grid 所需要的参数传给Server ，⽽jsonReader 设置了如何去解析从Server 端传回来的json 数据。如果没有设置jsonReader 的话，jqGrid 将会根据默认的设置来解析json 数据，并显⽰在表格⾥。但如果传回来的json 数据，不太符合默认设置（⽐如内部的结构名不太⼀样），那么就有必要修改这⼀设置。⽐如：
注1：据其他⽹友的⽂章，如果设置repeatitems 为false ，不但数据可以乱序，⽽且不⽤每个数据元素都要具备，⽤到哪个到哪个就可以了。实验却是如此。
随机数表法怎么随机看注2：cell 、id 在repeatitems 为true 时可以⽤到，即每⼀个记录是由⼀对id 和cell 组合⽽成，即可以适⽤另⼀种json 结构。援引⽂档中的例⼦：
repeatitems 为true 时：
json 结构为：
repeatitems 为false 时：
01. jsonReader : {02. root:"rows", // json 中代表实际模型数据的⼊⼝03. page:"page", // json 中代表当前页码的数据04. total:"total",// json 中代表页码总数的数据05. records:"records",// json 中代表数据⾏总数的数据06.
repeatitems:true ,// 如果设为false ，则jqGrid 在解析json 时，会根据name 来搜索对应的数据元素（即可以json 中元素可以不按顺序）；⽽所使⽤的name 是来⾃于colModel 中的name 设定。07. cell:"cell", 08. id:"id", 09. userdata:"userdata", 10. subgrid: { 11. root:"rows", 12. repeatitems:true , 13. cell:"cell"14. } 15. }
01. jsonReader: {02. root:"gridModel", 03. page:"page", 04. total:"total", 05. records:"record", 06. repeatitems :false 07. }
01. jQuery("#gridid").jqGrid({02. ... 03. jsonReader : { 04. root:"invdata",05. page:"currpage", 06. total:"totalpages", 07. records:"totalrecords" 08. }, 09. ... 10. });
01. { 02. "totalpages":"xxx", 03. "currpage":"yyy",04. "totalrecords":"zzz",05. "invdata" : [ 06.
{"id" :"1","cell" :["cell11","cell12","cell13"]}, // cell 中不需要各列的name ，只要值就OK 了，但是需要保持对应07. {"id" :"2","cell" :["cell21","cell22","cell23"]},08. ... 09. ] 10. }
json 结构为：
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 等（ ）。
如何编写jsp3. 第⼀个实例
3.1 服务器端
⽤于提供数据的Action 。为了可以复⽤这种专门接受jqGrid 传来参数的Action ，我抽象出⼀个基本类。具体代码如下：01. jQuery("#gridid").jqGrid({02. ... 03. jsonReader : { 04. root:"invdata",05. page:"currpage", 06. total:"totalpages", 07. records:"totalrecords", 08. repeatitems:false , 09. id:"0" 10. }, 11. ... 12. });
01. { 02. "totalpages" :"xxx", 03. "currpage" :"yyy",04. "totalrecords" :"zzz",05. "invdata" : [ 06.
uniqueidentifier与int不兼容{"invid" :"1","invdate":"cell11","amount" :"cell12","tax" :"cell13","total":"1234","note" :"somenote"},// 数据中需要各列的name ，但是可以不按列的顺序07.
{"invid" :"2","invdate":"cell21","amount" :"cell22","tax" :"cell23","total":"2345","note" :"some note"},08. ... 09. ] 10. }
01. package cn.gengv.struts2ex.jqGrid;02. 03. import java.util.Collections;04. import java.util.List;05. import com.opensymphony.xwork2.ActionSupport;06. 07. @SuppressWarnings ("serial")08. publicabstractclass JqGridBaseAction<T>extends ActionSupport {09. // 和jqGrid 组件相关的参数属性 10. private List<T> gridModel = ptyList();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. publicabstractint getResultSize();
说明：其中的成员变量对应着jqGrid 的prmNames 和jsonReader 中的设置。
rows rows -每页中现实的记录⾏数19. publicabstractint getResultSize();20. 21. publicabstract List<T> listResults(int from, int length);22. 23. public String refreshGridModel() {24. try { 25. List<T> results = ptyList();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 ) il((double ) record / (double ) rows);32. return SUCCESS; 33. }catch (Exception e) { 34. e.printStackTrace();35. this .Message());36. return ERROR; 37. } 38. } 39. 40. public List<T> getGridModel() {41. return gridModel; 42. } 43. publicvoid setGridModel(List<T> gridModel) {44. this .gridModel = gridModel;45. } 46. public Integer getRows() {47. return rows; 48. } 49. publicvoid setRows(Integer rows) {50. this .rows = rows; 51. } 52. public Integer getPage() {53. return page; 54. } 55. publicvoid setPage(Integer page) {56. this .page = page; 57. } 58. public Integer getTotal() {59. return total; 60. } 61. publicvoid setTotal(Integer total) {62. this .total = total; 63. } 64. public Integer getRecord() {65. return record; 66. } 67. publicvoid setRecord(Integer record) {68. this .record = record; 69. } 70. public String getSord() {71. return sord; 72. } 73. publicvoid setSord(String sord) {74. this .sord = sord; 75. } 76. public String getSidx() {77. return sidx; 78. } 79. publicvoid setSidx(String sidx) {80. this .sidx = sidx; 81. } 82. public String getSearch() {83. return search; 84. } 85. publicvoid setSearch(String search) {86. this .search = search; 87. } 88.
}
jquery下载文件插件search
search -是否是⽤于查询的请求sidx
sort -⽤于排序的列名sord
order -排序的⽅式page
page page 当前页码gridModel
-root ⽤于得到实际数据的数组名称total
-total 总页数record -records 总记录数
refreshGridModel()⽅法中，主要⼯作就是为gridModel 、record 、total 赋值，这些值也将会传回客户端。具体的⼀个实现类：
duplicate reference designator⽽在l 中，应按如下设置配置action ：
3.2 客户端（浏览器）
javascript 部分：01. package cn.gengv.struts2ex.jqGrid;02. import java.util.Collections;03. import java.util.List;04. @SuppressWarnings ("serial")05. publicclass ListContactsAction extends JqGridBaseAction<Contact> {06. 07. private ContactService contactService;08. 09. @Override 10. public String execute() {11. returnthis .refreshGridModel();12. } 13. 14. @Override 15. publicint getResultSize() {16. returnthis .contactService.queryResultsCount();17. } 18. 19. @Override 20. public List<Contact> listResults(int from,int length) {21. List<Contact> results = ptyList();22. 23. results =this .contactService.queryByPage(from, length);24. 25. return results; 26. } 27. publicvoid setContactService(ContactService contactService) {28. this .contactService = contactService;29. } 30. 31. }
01. <action name ="jqGrid01"class ="cn.gengv.struts2ex.jqGrid.ListContactsAction">02. <result name ="success"type ="json">03. <param name ="includeProperties">04. ^gridModel/[/d+/]/./w+,05. rows, page, total, record 06. < /param>07. <param name ="noCache">true </param>08. <param name ="ignoreHierarchy">false </param>09. < /result>10. </action>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论