2013-05-03 93 views
0

我想在內聯編輯後重新加載jqGrid,或點擊一個事件,在頁面上單擊保存按鈕後,我可以使用jQuery.data()保存一些值。我見過很多關於使用$("#gridid').edit();的討論,但是我的jqGrid目前沒有設置爲使用該功能,我不確定$("#gridid').edit()將如何集成到我當前的設置中。在內聯編輯後重新加載jqGrid

/*********************************************************** 
*********************jqgrid********************************* 
***********************************************************/ 
lastSel = ""; 
$(function(){ 
    var myGrid = jQuery("#list"); 
    console.log(myGrid); 

    $("#list").jqGrid({ 
    url:'php.scripts/customers.get.php', 
    datatype: 'xml', 
    mtype: 'POST', 
    colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'], 
    colModel :[ 
     {name:'idcustomers', index:'idcustomers', width:55}, 
     {name:'firstname', index:'firstname', width:90, editable: true}, 
     {name:'lastname', index:'lastname', width:90, editable: true}, 
     {name:'address1', index:'address1', width:90, editable: true}, 
     {name:'address2', index:'address2', width:90, editable: true}, 
     {name:'city', index:'city', width:90, editable: true}, 
     {name:'state', index:'state', width:90, editable: true}, 
     {name:'zip', index:'zip', width:90, editable: true}, 
     {name:'phone', index:'phone', width:90, editable: true}, 
     {name:'email', index:'email', width:90, editable: true}, 
     {name:'cell', index:'cell', width:90, editable: true} 
    ], 
    pager: '#pager', 
    rowNum:20, 
    rowList:[20,100,300], 
    sortname: 'idcustomers', 
    sortorder: 'asc', 
    shrinkToFit: true, 
    viewrecords: true, 
    gridview: true, 
    caption: 'Customers', 
    width: 1400, 
    height: 290, 
    editurl: 'php.scripts/jqgrid.updaterow.php', 
    ajaxGridOptions: {type:"POST"}, 
    onSelectRow: function(id){ 
     if(id && id!==lastSel){ 
      jQuery('#list').restoreRow(lastSel); 
      lastSel=id; 
      jQuery("#list").data('selid',lastSel); 

      console.log(lastSel); 
      console.log(jQuery("#list").data('selid')); 

      $.ajax({ 
       type: "POST", 
       url: "php.scripts/customers.setid.php", 
       data: { idcustomers: jQuery("#list").data('selid') } 
      }).done(function(msg) 
      { 
       console.log(msg); 
      }); 

      jQuery('#list').data('selid', jQuery("#list").getCell(lastSel,0)); 
      jQuery('#list').data('firstname', jQuery("#list").getCell(lastSel,1)); 
      jQuery('#list').data('lastname', jQuery("#list").getCell(lastSel,2)); 
      jQuery('#list').data('address1', jQuery("#list").getCell(lastSel,3)); 
      jQuery('#list').data('address2', jQuery("#list").getCell(lastSel,4)); 
      jQuery('#list').data('city', jQuery("#list").getCell(lastSel,5)); 
      jQuery('#list').data('state', jQuery("#list").getCell(lastSel,6)); 
      jQuery('#list').data('zip', jQuery("#list").getCell(lastSel,7)); 
      jQuery('#list').data('phone', jQuery("#list").getCell(lastSel,8)); 
      jQuery('#list').data('email', jQuery("#list").getCell(lastSel,9)); 
      jQuery('#list').data('cell', jQuery("#list").getCell(lastSel,10));   
     } 
    } 
    }) 
.jqGrid('navGrid','#pager',{ edit: false, add: true, search: false }, {}, {}, {}, {}, {}) 
.jqGrid('inlineNav',"#pager",{}) 
.jqGrid('navButtonAdd',"#pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', 
    onClickButton:function(){ 
     myGrid[0].toggleToolbar() 
    } 
}) 
.jqGrid('navButtonAdd',"#pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh', 
    onClickButton:function(){ 
     myGrid[0].clearToolbar(); 
     jQuery('#list').data('selid', ""); 
     jQuery('#list').data('firstname', ""); 
     jQuery('#list').data('lastname', ""); 
     jQuery('#list').data('address1', ""); 
     jQuery('#list').data('address2', ""); 
     jQuery('#list').data('city', ""); 
     jQuery('#list').data('state', ""); 
     jQuery('#list').data('zip', ""); 
     jQuery('#list').data('phone', ""); 
     jQuery('#list').data('email', ""); 
     jQuery('#list').data('cell', ""); 
    } 
}) 
.jqGrid('filterToolbar'); 

/*********************************************************** 
*********************jqgrid********************************* 
***********************************************************/ 

回答

0

希望這有助於你 -

onSelectRow : function(rowid){ 
      if(rowid && rowid!== lastsel){ 
       $("#datagrid").jqGrid('restoreRow',lastsel); 
       $("#datagrid").jqGrid('editRow',rowid,true); 
       lastsel = rowid; 
      } 
     }, 

editrow方法觸發jqgrid與編輯後的數據,並傳遞一個額外的參數OPER到網址和所有它所選行的數據。 在editurl選項你的網址包含一個參數與操作,所以通過在服務器端使用這個參數,你可以更新你的數據在php中的數據庫。 沒有必要爲此使用ajax調用。