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

<script type="text/javascript">
   var lastId;//行編輯時(shí)用來(lái)存放行的id
   $(function(){
    showTable(); //顯示jqgrid表格 
    $('.btn-update').click(updateRowData);//編輯按鈕
    $('.btn-save').click(saveRowData);//保存按鈕添加事件，默認(rèn)不可用
    $('.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','數(shù)量'], 
     colModel:[
        {name:'id',index:'id',hidden:true},  
        /*實(shí)現(xiàn)行編輯功能需要添加屬性editable:true,edittype:'text',其中'text'與input中的type屬性對(duì)應(yīng)，
        比如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],
     //顯示記錄數(shù)的格式
     recordtext : "記錄 {0} - {1} 總記錄數(shù) {2}",
     //頁(yè)數(shù)顯示格式
     pgtext : "第 {0}頁(yè)  共 {1} 頁(yè)",

     viewrecords:true,    
     jsonReader: {
       // 數(shù)據(jù)行（默認(rèn)為：rows）
       root:"rows",    
       repeatitems : false,  
       page: "page",   // 當(dāng)前頁(yè)
       records:"records", // 總記錄數(shù)
       total: "total" 
     },
     onSelectRow: function(id){

      },
      onSelectAll:function(id){
      },
      //加載完成（初始加載），回調(diào)函數(shù)
      loadComplete: function(){ 
       layer.closeAll('loading');
       var page = $('#tableList').getGridParam('page');
       layer.msg('第'+page+'頁(yè)', {
       time: 1000, //1s后自動(dòng)關(guān)閉
       });
     },
     /*編輯提交時(shí)用來(lái)對(duì)提交的數(shù)據(jù)進(jìn)行序列化，如果不添加此屬
     性，默認(rèn)提交的是各個(gè)可編輯的字段名值對(duì)，后臺(tái)需要有多個(gè)同名
     字段來(lái)對(duì)應(yīng)，序列化后，可以只用一個(gè)包含各個(gè)字段的對(duì)象即可接
     收*/
     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"
    });
   }

   /*編輯行的函數(shù)*/
   function updateRowData()
   {
    //獲取選中行的id
    var id=$('#tableList').jqGrid('getGridParam','selrow');
    if(id==null)
     {
      return;
     }
    lastId=id; //存放編輯的id
    //調(diào)用此方法，使當(dāng)前行變?yōu)榭删庉?
    $("#tableList").jqGrid('editRow', id); 

    $('.btn-update').attr("disabled",true);//編輯按鈕變?yōu)椴豢捎?
    //保存和取消按鈕變?yōu)榭捎?
    $('.btn-save').attr("disabled",false);
    $('.btn-cancel').attr("disabled",false);
   }

   /*保存編輯后的數(shù)據(jù)函數(shù)*/
   function saveRowData()
   {
    $("#tableList").jqGrid(
      'saveRow', 
      lastId,//獲取編輯行的id
      { 
       /*成功提交到后臺(tái)的回調(diào)函數(shù)*/
       successfunc: function(response) {
         //返回到前臺(tái)的json字符串

    var data = 
    eval('(' + response.responseText + ')');
         if(data.resultCode==0)
          {
         layer.msg("保存成功！",{icon:1});
         //返回true，對(duì)前臺(tái)數(shù)據(jù)進(jìn)行更新
           return true;
          }
         else
         {
         layer.msg("保存失敗！",{icon:2});
         //返回false，對(duì)前臺(tái)數(shù)據(jù)不更新
           return false;
         }
        },
        /*提交的請(qǐng)求地址*/
       url:'recoveryTokenUpdate.action',
       /*系統(tǒng)發(fā)生異常時(shí)的回調(diào)函數(shù)*/
       errorfunc:function(){

       layer.msg('系統(tǒng)異常！', {time: 2000});
       },
       /*請(qǐng)求類型post*/
       "mtype" : "POST"
      });
    $('.btn-updateToken').attr('disabled',false);
    $('.btn-saveToken').attr('disabled',true);
    $('.btn-cancelToken').attr('disabled',true);
   }

   /*取消編輯函數(shù)*/
   function cancelRowData()
   {
    //取消所編輯的行的操作
    $('#tableList').jqGrid('restoreRow', lastId);
    $('.btn-updateToken').attr('disabled',false);
    $('.btn-saveToken').attr('disabled',true);
    $('.btn-cancelToken').attr('disabled',true);
   }

  </script>