jqGrid 例子

var test_main = {
 /*初始化*/
 init: function(options){
  var defaults = {
   className : 'test_main',
   alertfield: 'name',
   caption   : '测试',
   grid      : '#grid_test',
   pager     : '#pager_test',
   error     : '#error_test',
   data_url  : UR_ADMIN +'/test/get_table/',
   editurl   : UR_ADMIN +'/test/edit_save/',
   openurl   : UR_ADMIN +'/test/edit/id/',
   del_url   : UR_ADMIN +'/test/delete/',
   autowidth : true,
   width     : 800,
   height    : $(window).height() - 230
  };
  var options = $.extend(defaults, options);
  this.options = options;
  this.create_grid(options);
 },
 /** 添加 */
 add: function(target){
  if(target=='self'){
   var tab_id = '#t'+this.options.className;
   maintabs.add(tab_id,this.options.caption+'添加',this.options.openurl+'0/');
  }else{
   back_call = this.options.className +'.refresh()';
   Dialog.show(this.options.caption+'--添加',this.options.openurl+'0/',700,650,back_call); 
  }
 },
 /** 编辑 */
 edit: function(target){
  var rowid = $(this.options.grid).jqGrid('getGridParam','selrow');
  if(rowid){
   var rowData = $(this.options.grid).jqGrid("getRowData", rowid);
   if(target=='self'){
    var tab_id = '#t'+this.options.className+rowData.id;
    var caption = eval('rowData.'+this.options.alertfield);
    maintabs.add(tab_id,this.options.caption+':'+caption,this.options.openurl+rowData.id+'/');
   }else{
    back_call = this.options.className +'.refresh()';
    Dialog.show(this.options.caption+'--编辑',this.options.openurl+rowData.id+'/',700,650,back_call); 
   }
  } else {
   Dialog.alert("请选择一项"+this.options.caption);
  }       
 },
 /** 删除 */
 del: function(){
  var options = this.options;
  var rowid = $(options.grid).jqGrid('getGridParam','selrow');
  if(rowid){
   var rowData = $(options.grid).jqGrid("getRowData", rowid);
   field_value = eval('rowData.'+options.alertfield);
   if(!confirm("删除"+options.caption+"["+field_value+"]，请确认？")) return false;
   $.ajax({
    url: options.del_url+ "id/"+rowData.id+"/",
    success: function (response) {
     call(options,'refresh');
     Dialog.alert(options.caption+'[<span>'+field_value+'</span>]'+'已删除');
    }
   });
  } else {
   Dialog.alert("请选择一项"+this.options.caption);
  }       
 },
 /**刷新 */
 refresh: function(){
  $(this.options.error).html('');
  var rowid = $(this.options.grid).jqGrid('getGridParam','selrow');
  $(this.options.grid).jqGrid('setGridParam',{selrow:rowid}).trigger("reloadGrid");
  setTimeout( function() {$(this.options.grid).jqGrid('setSelection',rowid)},300);
 },
 /**搜索 */
 search: function(form){
  var formdata = $(form).serialize();
  if(formdata!=''){
   formdata = formdata.replace(/=/g, ':"');
   formdata = formdata.replace(/&/g, '",');
   formdata += '"';
  }
  formdata = '{'+formdata+'}';
  eval("$(this.options.grid).jqGrid('setPostData',"+formdata+");");
  $(this.options.grid).trigger("reloadGrid");
  this.show();
 },
 /**显示 */
 show: function(){
   $(this.options.grid).jqGrid('setGridState','visible');
 },
 /**隐藏 */
 hide: function(){
   $(this.options.grid).jqGrid('setGridState','hidden');
 },
 /*创建GRID*/
 create_grid:function(options){
  jQuery(options.grid).jqGrid({
   url: options.data_url,
   datatype: "json",
   mtype: "POST",
   colNames:["id","名称","显示","更新时间"],
   colModel:[
    {name:'id',index:'id', hidden:true,key:true},
    {name:'name',index:'name', width:180},
    {name:'display',index:'display', width:50, align:"center",editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
    {name:'update_time',width:80}
   ],
   rowNum:10,
   rowList:[10,20,30,40,50],
   autowidth: options.autowidth,
   width : options.width,
   height: options.height,
   sortname: 'sort',
   sortorder: "asc",
   pgbuttons : true,
   pginput : true,
   pager : options.pager,
   viewrecords: true,
   jsonReader: {
    repeatitems : false,
    id: "0"
   },
   hiddengrid: false,
   caption: options.caption+'',
   forceFit : true,
   cellEdit: false,
   cellsubmit: 'clientArray',
   editurl:options.editurl,
   afterSaveCell : function(rowid,name,val,iRow,iCol) {
    var rowData = $(options.grid).jqGrid("getRowData", rowid);
    postdata =  "id="+rowData.id+"&"+name+"="+val;
    $.ajax({
        type: "POST",
        dataType : "json",
        url: options.editurl,
        data: postdata,
        success: function(response){
       if(response.status == 'error'){
        $(options.error).html(response.error);
       }else{
        $(options.error).html('');
       }
        }
      });
   },
   loadComplete: function(xhr) {
    $(options.error).html('');
    $(options.error).hide();
   },
   loadError: function(xhr,status,error){
    $(options.error).html('<div>'+error+'</div>');
    $(options.error).show();
   },
   gridComplete: function() {

   }
  });
  /****GRID 外部处理*******/
  $(options.grid).jqGrid('navGrid',options.pager,{edit:false,add:false,del:false,search:false,refresh:false,view:false});
  $(options.grid).jqGrid('navButtonAdd',options.pager,{caption:"刷新",
   buttonicon:"ui-icon-refresh",
   onClickButton:function(){
    call(options,'refresh');
   }
  });
  $(options.grid).jqGrid('navButtonAdd',options.pager,{caption:"编辑状态",
   buttonicon:"ui-icon-close",
   id:'isedit',
   onClickButton:function(){
    var isedit = !$(options.grid).jqGrid('getGridParam','cellEdit');
    if(isedit){
     $('span.ui-icon-close', '#isedit',options.pager).removeClass().addClass('ui-icon ui-icon-check');
     //$('#isedit',options.pager).attr('title','允许编辑');
    }else{
     $('span.ui-icon-check', '#isedit',options.pager).removeClass().addClass('ui-icon ui-icon-close');
     //$('#isedit',options.pager).attr('title','不允许编辑');
    }
    $(options.grid).jqGrid('setGridParam',{cellEdit:isedit}).trigger("reloadGrid");
   }
  });
  /*
  $(options.grid).jqGrid('navButtonAdd',options.pager,{caption:"移动",
   buttonicon:"ui-icon-extlink",
   onClickButton:function(){
    $(options.grid).jqGrid('sortableRows');
   }
  });*/
 }
};

文章摘自：http://blog.whiledo.com/archives/372