jQuery学习笔记--jqGrid方法列表 官方文档!

jqGrid官方文档: 

 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:upgrade_from_3.8_to_4.0.0

 

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 0
datathe 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传递的参数名称。其默认值为：

view plain

1. 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 plain

1. 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 plain

1. 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 plain

1. jQuery("#gridid").jqGrid({
2.     ... 
3.     jsonReader : { 
4.         root:"invdata",
5.         page:"currpage", 
6.         total:"totalpages", 
7.         records:"totalrecords" 
8.     }, 
9.     ... 
10. }); 

json结构为：

view plain

1. { 
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 plain

1. 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 plain

1. { 
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 plain

1. 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. publicabstractclass JqGridBaseAction<T>extends ActionSupport {
9.    // 和jqGrid组件相关的参数属性 
10.    private List<T> 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.    publicabstractint getResultSize();
20.   
21.    publicabstract List<T> listResults(int from, int length);
22.   
23.    public String refreshGridModel() {
24.        try { 
25.             List<T> 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<T> getGridModel() {
41.        return gridModel; 
42.     } 
43.    publicvoid setGridModel(List<T> gridModel) {
44.        this.gridModel = gridModel;