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层次结构，直到网格单元格为止。返回的值将是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（行id的{{1}}属性值），那么您可以使用<tr>。

jqGrid的现有代码包含类似
的代码
$td.closest("tr.jqgrow").attr("id")

因此，不需要注册额外的... 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以允许选择行。

演示https://jsfiddle.net/wugfty1o/3/演示了true的使用情况。

为jqGrid的所有页面启用editGridRow方法

1 个答案: