本文實例為大家分享了jqgrid實現簡單的單行編輯功能的具體代碼，供大家參考，具體內容如下

1.html代碼

<table id="tableList" style="text-align:center;"></table><div id=tablePager></div>

2.script代碼

<script type="text/javascript">   var lastId;//行編輯時用來存放行的id   $(function(){    showTable(); //顯示jqgrid表格     $('.btn-update').click(updateRowData);//編輯按鈕    $('.btn-save').click(saveRowData);//保存按鈕添加事件，默認不可用    $('.btn-cancel').click(cancelRowData);//取消按鈕，取消編輯操作   });   function showTable(){    layer.load(2);    $("#tableList").jqGrid({      url:'myList.action',     mtype: "POST",     styleUI : 'AmazeUI',     datatype: "json",     height:"auto",      autowidth:true,     rownumbers: true,     multiselect: true,     colNames:['id','數量'],      colModel:[        {name:'id',index:'id',hidden:true},          /*實現行編輯功能需要添加屬性editable:true,edittype:'text',其中'text'與input中的type屬性對應，        比如checkbox,radio，password等*/                       {name:'num',index:'num',align: "center",editable: true, edittype: 'text'}                ],        sortable:true,       sortname:'bc.serialNumber',       sortorder:'asc',       rowNum:10,      rowList:[10,20,30,90],     //顯示記錄數的格式     recordtext : "記錄 {0} - {1} 總記錄數 {2}",     //頁數顯示格式     pgtext : "第 {0}頁  共 {1} 頁",     viewrecords:true,         jsonReader: {       // 數據行（默認為：rows）       root:"rows",           repeatitems : false,         page: "page",   // 當前頁       records:"records", // 總記錄數       total: "total"      },     onSelectRow: function(id){      },      onSelectAll:function(id){      },      //加載完成（初始加載），回調函數      loadComplete: function(){        layer.closeAll('loading');       var page = $('#tableList').getGridParam('page');       layer.msg('第'+page+'頁', {       time: 1000, //1s后自動關閉       });     },     /*編輯提交時用來對提交的數據進行序列化，如果不添加此屬     性，默認提交的是各個可編輯的字段名值對，后臺需要有多個同名     字段來對應，序列化后，可以只用一個包含各個字段的對象即可接     收*/     serializeRowData: function(postdata) {  return {'entity.id':postdata.id,'entity.num':postdata.num};       },     prmNames:           {rows:"pageInfo.pageSize",page:"pageInfo.page",     sort:"pageInfo.sidx",order:"pageInfo.sord",     search: "pageInfo._search"},     pager:"#tablePager"    });   }   /*編輯行的函數*/   function updateRowData()   {    //獲取選中行的id    var id=$('#tableList').jqGrid('getGridParam','selrow');    if(id==null)     {      return;     }    lastId=id; //存放編輯的id    //調用此方法，使當前行變為可編輯    $("#tableList").jqGrid('editRow', id);     $('.btn-update').attr("disabled",true);//編輯按鈕變為不可用    //保存和取消按鈕變為可用    $('.btn-save').attr("disabled",false);    $('.btn-cancel').attr("disabled",false);   }   /*保存編輯后的數據函數*/   function saveRowData()   {    $("#tableList").jqGrid(      'saveRow',       lastId,//獲取編輯行的id      {        /*成功提交到后臺的回調函數*/       successfunc: function(response) {         //返回到前臺的json字符串    var data =     eval('(' + response.responseText + ')');         if(data.resultCode==0)          {         layer.msg("保存成功！",{icon:1});         //返回true，對前臺數據進行更新           return true;          }         else         {         layer.msg("保存失敗！",{icon:2});         //返回false，對前臺數據不更新           return false;         }        },        /*提交的請求地址*/       url:'recoveryTokenUpdate.action',       /*系統發生異常時的回調函數*/       errorfunc:function(){       layer.msg('系統異常！', {time: 2000});       },       /*請求類型post*/       "mtype" : "POST"      });    $('.btn-updateToken').attr('disabled',false);    $('.btn-saveToken').attr('disabled',true);    $('.btn-cancelToken').attr('disabled',true);   }   /*取消編輯函數*/   function cancelRowData()   {    //取消所編輯的行的操作    $('#tableList').jqGrid('restoreRow', lastId);    $('.btn-updateToken').attr('disabled',false);    $('.btn-saveToken').attr('disabled',true);    $('.btn-cancelToken').attr('disabled',true);   }  </script>