jqgrid常用方法

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

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

 

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

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

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


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

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

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


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

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

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


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

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

$("#jqgrid").jqGrid({
    url:"${ctx}/sys/role/search.dm",
    colNames:["角色名称"],//,"角色代码"
    colModel:["roleName"],//"roleCode"还可以用对象替换
    jsonReader:{id:"roleId",root:"dataList"},
    width:240,
    height:250,
    rowNum:20,//每页20条记录
    pager: "logListPager",//分页显示的DIVID
    sortname: "actionTime",//默认排序的列名
    sortorder: "desc",//默认排序的顺序
    scroll:true,//鼠标滚动翻页
    onSelectRow: function(rowid) {}
});


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

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

var rowid = $("#searchResultList").getGridParam("selrow");
var rowData = $("#searchResultList").getRowData(rowid);


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

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

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


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

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

评论

1 楼 chenjianhuacool 2014-09-14  

请参考jqGrid中文demo:http://blog.mn886.net/jqGrid/