Включение метода editGridRow для всех страниц jqGrid

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 будут вставлены в корпус сетки. Элементы не будут иметь обработчика событий. Вы можете устранить проблему, переместив $('.GetLink').click в обратный вызов loadComplete, но я бы рекомендовал вместо этого использовать beforeSelectRow.

Я уже писал вам о beforeSelectRow. Ниже я расскажу, как это работает. Все элементы HTML-страницы поддерживают интерфейс DOM, который включает в себя такие методы, как onclick. Важно понимать, что обработка событий (поток событий) поддерживает событие барботажа событий, что означает, что распространение вверх будет продолжаться на родительских элементах до документа (см. here). Любой обработчик событий может вызвать метод stopPropagation интерфейса Event, чтобы предотвратить дальнейшее распространение событий.

Таким образом, если пользователь нажимает на внутренние элементы ячеек таблицы, то обработчики событий click будут уволены не только с элементами, но и обработчиком событий, связанными с родительскими объектами. Если у вас есть сетка на 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 дает нам полную информацию о клике. Мы можем использовать var $td = $(e.target).closest("td") или лучше var $td = $(e.target).closest("tr.jqgrow>td"), чтобы идти вверх по иерархии DOM до ячейки сетки. Возвращаемое значение будет обработкой jQuery для элемента DOM, который представляет элемент <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 (значение id атрибут строки <tr>), то вы можете использовать $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.