jqGrid 学习笔记（转）

一、主要API接口getGridParam、setGridParam：

　　getGridParam方法：

　　getGridParam("url")： 获取当前的AJAX的URL 
　　getGridParam("sortname")：排序的字段 
　　getGridParam("sortorder")：排序的顺序 
　　getGridParam("selrow")：得到选中行的ID 
　　getGridParam("page")：当前的页数 
　　getGridParam("rowNum")：当前有多少行
　　getGridParam("datatype")：得到当前的datatype 
　　getGridParam("records")：得到总记录数 
　　getGridParam("selarrrow")：可以多选时，返回选中行的ID 
　
　　setGridParam方法：

　　setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger("reloadGrid")使用 
　　setGridParam({sortname:newvalue})：设置排序的字段
　　setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc 
　　setGridParam({page:newvalue})：设置翻到第几页
　　setGridParam({rowNum:newvalue})：设置当前每页显示的行数
　　setGridParam({datatype:newvalue})：设置新的datatype(xml,json)

 

     形式2：jQuery('#tableID').jqGrid('getGridParam','url'))

　　         jQuery("#tableID").jqGrid('setGridParam',{page:2}).trigger("reloadGrid")

 

二、jqGrid colModel表体结构配置

name 　　　　　 必要的属性，具有唯一标识性，如在弹出的editform窗体中，将作为input的name属性  index  为排序用，最方便的是设为数据库字段  width  150，宽度，数值 align  left,center,right  detefmt  date:true  editable flase  editoptions edittype为先决条件，此为值，[]  editrules 编辑规范  edittype text,textarea,select,checkbox,password  formatoptions  formatter  hidedlg  false (appear in the modal dialog)  hidden  false 在加载时是否隐藏列  jsonmap  声明json的格式  key  false  label  当没有设置colNames时，在列里用此代替，此项也为空时，就是name代替  resizable true，列宽可调节  search  true，可搜索 sortable true，可排序 sorttype text,int,float,date，排序子段类型 xmlmap  声明xml的格式 

三、一个例子[Array Data]

//<table id="list4"></table> 
jQuery("#list4").jqGrid({
    datatype: "local",
    height: 250,
       colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
       colModel:[
           {name:'id',index:'id', width:60, sorttype:"int"},
           {name:'invdate',index:'invdate', width:90, sorttype:"date"},
           {name:'name',index:'name', width:100},
           {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
           {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},        
           {name:'total',index:'total', width:80,align:"right",sorttype:"float"},        
           {name:'note',index:'note', width:150, sortable:false}        
       ],
       multiselect: true,
       caption: "Manipulating Array Data"
});
var mydata = [
        {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];
for(var i=0;i<=mydata.length;i++)
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

 

 四、行操作

?

//获取选中行数据
jQuery("#a1").click( function(){
    var id = jQuery("#list5").jqGrid('getGridParam','selrow');
    if (id)    {
        var ret = jQuery("#list5").jqGrid('getRowData',id);
        alert("id="+ret.id+" invdate="+ret.invdate+"...");
    } else { alert("请选择一行！");}
});

//删除
jQuery("#a2").click( function(){
    var su=jQuery("#list5").jqGrid('delRowData',12);
    if(su) alert("成功删除第12行"); else alert("删除失败");
});

//更新
jQuery("#a3").click( function(){
    var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='http://blog.163.com/fushahui_1988@126/blog/images/user1.gif'/>"});
    if(su) alert("更新成功"); else alert("更新失败");
});

//新增
jQuery("#a4").click( function(){
    var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
    var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
    if(su) alert("新增成功"); else alert("新增失败");

var ids = $("#jqGrid1").jqGrid('getGridParam','selarrrow'); //多选时返回选中行的ID
$("#jqGrid1").setSelection(ids[i],false);  //false 屏蔽该列的选择