爲jqGrid的所有頁面啓用editGridRow方法

Question

問題是我能夠獲得編輯對話框，點擊當前頁面有10條記錄的鏈接。但是當我導航到第二頁時，我沒有得到編輯對話。請幫助 在此先感謝

colModel:{ name: "FirstName", index: "FirstName", width: 100, sortable: true, editable: true, formatter: GetRow, unformat: GetCellValue }, 

    function GetRow(cellvalue, options, rowObject) { 
     return "<a href='#' class='GetLink'>" + cellvalue + "</a>"; 
    } 

$('.GetLink').click(function() { 
    var row = $('#grid').jqGrid('getGridParam', 'selrow'); 
    if (row) { 
     $('#grid').jqGrid('editGridRow', row, { recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: false,}); 
    } 
    else { 
     alert("Select the row you want to edit"); 
    } 
}); 

Answer 1

請您以前的問題重讀my answer。您應該不使用$('.GetLink').click，因爲它註冊鏈接目前存在a.GetLink。確切地說，$('.GetLink')搜索當前存在的元素，其類別爲GetLink，並返回DOM元素的數組作爲jQuery包裝器。通過.click您在每個元素上註冊單獨的點擊控制柄。如果用戶導航到第二頁，按某列進行排序或做出許多其他操作，則網格主體將重新創建。先前創建的所有a.GetLink元素將被刪除，並且新的行（<tr>元素）將與新的a.GetLink一起插入到網格體中。元素將沒有原因的事件處理程序。您可以通過在loadComplete回調中移動$('.GetLink').click來解決問題，但我建議您使用beforeSelectRow代替。

我已經給你寫過beforeSelectRow了。我在這裏更詳細地解釋它是如何工作的。 HTML頁面的所有元素都支持DOM接口，其中包括如onclick的方法。理解事件處理（事件流）支持事件冒泡是很重要的，這意味着向上傳播將繼續到父元素直到文檔（請參閱here）。任何事件處理程序都可以調用Event接口的stopPropagation方法來防止進一步的事件傳播。

因此，如果用戶點擊表格單元格的內部元素，那麼事件處理程序將被觸發，不僅綁定到元素，而且綁定到父對象的事件處理程序。如果您對table#grid網格，那麼你可以註冊通過使用

jQuery("#grid").click(function (e) { 
    // e.target represent the DOM element INSIDE of the table 
    // which was clicked 
}); 

和事件處理程序點擊全網處理器將在點擊稱爲網格的任何內部元件（例如在<span class="myLink">some text</span>）。 e.target爲我們提供了有關clicked元素的完整信息。我們可以使用var $td = $(e.target).closest("td")或更好的var $td = $(e.target).closest("tr.jqgrow>td")去DOM層次的頂部，直到網格的單元格。返回的值將是DOM元素的jQuery包裝，代表<td>元素。我使用$開始對應的JavaSvript變量的名稱，以使代碼更具可讀性並強調它是jQuery包裝器。因此$td[0]將是DOM元素。每個td DOM元素都支持cellIndex屬性（請參閱here和here）。因此$td[0].cellIndex是被點擊的列的索引，並且colModel[$td[0].cellIndex].name是被點擊的列的名稱（其中var colModel = $(this).jqGrid("getGridParam", "colModel")）。如果您需要獲取rowid（行<tr>的id屬性的值），則可以使用$td.closest("tr.jqgrow").attr("id")。

的jqGrid的現有代碼包含像

... 
var ts = this; // the DOM of the grid 
... 
$(ts).click(function (e) { 
    ... 
    var rowid = $(e.target)("tr.jqgrow").attr("id"); 
    ... 
    if ($.isFunction(p.beforeSelectRow)) { 
     var isAllowSelection = p.beforeSelectRow.call(ts, rowid, e); 
     if (isAllowSelection) { 
      ... 
     } 
    } 

}) 

這樣一個代碼不需要註冊其他click處理。可以使用beforeSelectRow回調代替。人們應該不會忘記返回true以允許選擇該行。

演示https://jsfiddle.net/wugfty1o/3/演示了beforeSelectRow的用法。