jqgrid常用方法

中关村村草

jqgrid常用方法

当使用jqgrid来做数据表格控件时，如果搜索不到数据，是没有提示的。现在我们有一个需求就是如果当没有搜索到符合条件的数据时，需要在界面上提示。查了一下jqgrid的api，使用loadComplete事件可以满足这个要求。以下是相关代码：
Javascript代码

1.      loadComplete: function(xhr) {  
   
2.         var rowNum = parseInt($(this).getGridParam("records"), 10);  
   
3.         if (rowNum <= 0) {  
   
4.             alert("没有符合条件的记录！");  
   
5.         }  
   
6.     }  

复制代码

1. 如何获取grid选中的行的ID？
Javascript代码

1.     1. var rowid = $("#searchResultList").getGridParam("selrow");  
   
2. 
   
3. var rowid = $("#searchResultList").getGridParam("selrow");

复制代码

2. 如何在表格中动态增加一行数据？
Javascript代码

1.     1. //$("#jqgrid").addRowData(rowId, data, pos, idx);  
   
2.    2. //pos可以为[first,last,before,after],为后两者是需要指定相对的行ID  
   
3.    3. $("#jqgrid").addRowData("1", {"name":"test","age":12}, "first");  
   
4. 
   
5. //$("#jqgrid").addRowData(rowId, data, pos, idx);
   
6. //pos可以为[first,last,before,after],为后两者是需要指定相对的行ID
   
7. $("#jqgrid").addRowData("1", {"name":"test","age":12}, "first");

复制代码

3. 如何动态修改某行的数据内容，如某几列的值？
Javascript代码

1.     1. //setRowData( rowid, data );  
   
2.    2. $("#jqgrid").setRowData( "1", { tax:"5", total:"205" });  
   
3. 
   
4. //setRowData( rowid, data );
   
5. $("#jqgrid").setRowData( "1", { tax:"5", total:"205" });

复制代码

4. jqgrid的常用属性？
Javascript代码

1.     1. $("#jqgrid").jqGrid({  
   
2.    2.     url:"${ctx}/sys/role/search.dm",  
   
3.    3.     colNames:["角色名称"],//,"角色代码"  
   
4.    4.     colModel:["roleName"],//"roleCode" 还可以用对象替换  
   
5.    5.     jsonReader:{id:"roleId",root:"dataList"},  
   
6.    6.     width:240,  
   
7.    7.     height:250,  
   
8.    8.     rowNum:20,//每页20条记录  
   
9.    9.     pager: "logListPager",// 分页显示的DIVID  
   
10.   10.     sortname: "actionTime",// 默认排序的列名  
    
11.   11.     sortorder: "desc",//默认排序的顺序  
    
12.   12.     scroll:true,//鼠标滚动翻页  
    
13.   13.     onSelectRow: function(rowid) {}  
    
14.   14. });  
    
15. 
    
16. $("#jqgrid").jqGrid({
    
17.      url:"${ctx}/sys/role/search.dm",
    
18.      colNames:["角色名称"],//,"角色代码"
    
19.      colModel:["roleName"],//"roleCode"还可以用对象替换
    
20.      jsonReader:{id:"roleId",root:"dataList"},
    
21.      width:240,
    
22.      height:250,
    
23.      rowNum:20,//每页20条记录
    
24.      pager: "logListPager",//分页显示的DIVID
    
25.      sortname: "actionTime",//默认排序的列名
    
26.      sortorder: "desc",//默认排序的顺序
    
27.      scroll:true,//鼠标滚动翻页
    
28.      onSelectRow: function(rowid) {}
    
29. });

复制代码

5. 获取某一行的数据对象？
Javascript代码

1.     1. var rowid = $("#searchResultList").getGridParam("selrow");  
   
2.    2. var rowData = $("#searchResultList").getRowData(rowid);  
   
3. 
   
4. var rowid = $("#searchResultList").getGridParam("selrow");
   
5. var rowData = $("#searchResultList").getRowData(rowid);

复制代码

6. 如何使用API动态修改选中的行？
Javascript代码

1.     1. //true:重新加载表格数据, false:不重新加载表格数据  
   
2.    2. $("#jqGrid").setSelection("1", true);  
   
3. 
   
4. //true:重新加载表格数据, false:不重新加载表格数据
   
5. $("#jqGrid").setSelection("1", true);

复制代码

还有以下常用的API，
Javascript 代码

1.     1. $("#jqgrid").resetSelection();  
   
2.    2. $("#jqgrid").clearGridData();  
   
3.    3. $("#jqgrid").setCell(rowid,colname,nData,cssp,attrp);

复制代码

寂寞冲咖啡

谢谢分享