为 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 元素都将被删除，并且带有新 a.GetLink 的 new 行（<tr> 元素）将插入到网格主体中。元素将没有原因的事件处理程序。您可以通过将$('.GetLink').click 移动到loadComplete 回调中来解决此问题，但我建议您改用beforeSelectRow。

我已经给你写过beforeSelectRow。我在这里更详细地解释它是如何工作的。 HTML页面的所有元素都支持DOM接口，其中包括onclick等方法。重要的是要了解事件处理（事件流）支持事件冒泡，这意味着向上传播将继续在父元素上持续到文档（请参阅here）。任何事件处理程序都可以调用Event 接口的stopPropagation 方法来阻止进一步的事件传播。

因此，如果用户单击表格单元格的内部元素，则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 层次结构的顶部直到网格单元格。返回的值将是 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/的demo演示了beforeSelectRow的用法。