<table id="tableList" ></table>
<div id=tablePager></div>

<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>