jqgrid实现简单的单行编辑功能

本文实例为大家分享了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>