jqGrid的薩瓦行數據到數據庫上點擊了電網

Question

的我有3列jqGrid的。目前，我已經實現了它，使它成爲一個完全可編輯的網格（當你點擊一行時，它的可編輯表格）。現在離開編輯模式，並保存我必須按下輸入，但我需要的是有可能性：

當我點擊編輯模式下的網格自動保存我選擇的行數據到數據庫，但我仍然想保存進入點擊按鈕功能。

我不知道是否有可能實現，所以我有1個格都functionallities。

這裏是jqGrid的代碼

var lastsel; 
    jQuery(document).ready(function() { 
     jQuery("#list").jqGrid({ 
       url: '@Url.Action("SellerList")', 
       datatype: 'json', 
       mtype: 'GET', 
       loadonce: true, // to enable sorting on client side 
       sortable: true, //to enable sorting 
       colNames: ['SellerKey', 'SellerId', 'Navn', 'Email', 'Slet'], 
       colModel: [ 
        { name: 'id ', index: 'id ', width: 50, key: true, editable: true, editrules: { edithidden: false }, hidden: true }, 
        { name: 'SellerId', index: 'SellerId', align: 'center', width: 50, editable: true, editrules: { edithidden: false }, hidden: true }, 
        { name: 'Navn', index: 'Navn', width: 200, edittype: 'text', align: 'left', editable: true, sortable: true }, 
        { name: 'Email', index: 'Email', width: 300, edittype: 'text', align: 'left', editable: true, sortable: true }, 
        { name: 'act', index: 'act', width: 80, align: 'center', sortable: false }], 
       loadComplete: function() { 
        jQuery("#list").trigger("reloadGrid"); // Call to fix client-side sorting 
       }, 
       gridComplete: function() { 

        var ids = jQuery("#list").jqGrid('getDataIDs'); 
        var gr = jQuery('#list'); gr.setGridHeight('auto', true); 
        for (var i = 0; i < ids.length; i++) { 
         var cl = ids[i]; 
        var be = "<a href='#' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',{reloadAfterSubmit:false, url:'@Url.Action("deleteRow")'}); return false;\">Slet </>"; 
         jQuery("#list").jqGrid('setRowData', ids[i], { act: be }); 
        } 
       }, 

       onSelectRow: function(id) { 
        if (id && id !== lastsel) { 
         jQuery('#list').jqGrid('restoreRow', lastsel); 
         jQuery('#list').jqGrid('editRow', id, true); 
         lastsel = id; 
        } 
       }, 


       editurl: '@Url.Action("GridSave")', 
       rowNum: 100, 
       rowList: [5, 10, 20, 50], 
       viewrecords: true 


      }); 
     var grid = jQuery("#list"); 
     jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false }, { beforeShowForm: function(form) { 
       // "editmodlist" 
       var dlgDiv = grid.jqGrid("#delmodlist" + grid[0].id); 
       var parentDiv = dlgDiv.parent(); // div#gbox_list 
       var dlgWidth = dlgDiv.width(); 
       var parentWidth = parentDiv.width(); 
       var dlgHeight = dlgDiv.height(); 
       var parentHeight = parentDiv.height(); 
       // TODO: change parentWidth and parentHeight in case of the grid 
       //  is larger as the browser window 
       dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px"; 
       dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px"; 
      }}); 
    }); 

Answer 1

要保存當前編輯行，如果你在你需要的網格的另一行單擊只是使用saveRow，而不是restoreRowonSelectRow事件處理程序的內部：

onSelectRow: function (rowid) { 
    if (rowid !== lastSel) { 
     grid.jqGrid('saveRow', lastSel); 
     lastSel = rowid; 
    } 
    grid.jqGrid('editRow', rowid, true); 
    return true; 
} 

要保存行，如果你點擊以外的網格我沒有找到任何好的解決方案。例如，在IE9下面的代碼工作良好：

grid.focusout(function (e) { 
    if (e.relatedTarget) { 
     var $related = grid.find(e.relatedTarget); 
     if ($related.length <= 0 && lastSel) { 
      grid.jqGrid('saveRow', lastSel); 
     } 
    } 
}); 

其中var grid = jQuery("#list"); 觀看演示here。相同的代碼在其他Web瀏覽器中不起作用。對於IE8/IE7 e.pageX和e.pageY將設置爲focusout（但不在IE9中），因此可以使用屬性來計算鼠標位置並確定網格外的位置。

所以我不能建議你有任何好方法來保存編輯行點擊以外的網格。

Answer 2

我發現ICATS的回答有用的，但它不會在所有情況下正常工作。

我建議綁定到$('html')而不是$('body')。身體可能不佔用瀏覽器中的所有可見空間。