对jqGrid的所有页面启用editGridRow方法 [英] Enabling editGridRow method for all the pages of jqGrid

问题描述

问题是，单击具有10条记录的当前页面的链接时，我能够获得编辑对话框.但是当我导航到第二页时，我没有得到编辑对话框.请帮忙 预先感谢

The problem is I am able to get the edit dialog on click of a link for the current Page having 10 records.But when i navigate to second page, I am not getting the edit dialog. Please help Thanks in advance

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");
    }
});

推荐答案

请重新阅读我的回答.您不应该不使用 $('.GetLink').click，因为它会在当前存在的 a.GetLink上注册链接.确切地说，$('.GetLink')搜索具有类GetLink的当前存在的元素，并返回DOM元素的数组作为jQuery包装器.通过.click，您可以在每个元素上注册单独的单击手柄.如果用户导航到第二页，按某一列排序或执行许多其他操作，则将重新创建网格实体.将删除所有以前创建的 a.GetLink 元素，并将具有新a.GetLink的 new 行(<tr>元素)插入到网格主体中.元素将没有原因的事件处理程序.您可以通过将$('.GetLink').click移到loadComplete回调中来解决此问题，但我建议您改用beforeSelectRow.

Please reread my answer on your previous question. You should not use $('.GetLink').click because it registers the link on currently existing a.GetLink. To be exactly $('.GetLink') search for currently existing elements, which have the class GetLink and return array of the DOM elements as jQuery wrapper. By .click you register separate click handles on every of the element. If the user navigates to second page, sort by some column or makes many other action, the grid body will be recreated. All previously created a.GetLink elements will be removed and new rows (<tr> elements) with new a.GetLink will be inserted in the grid body. The elements will have no event handler of cause. You can fix the problem by moving $('.GetLink').click inside of loadComplete callback, but I would recommend you to use beforeSelectRow instead.

我已经写过关于beforeSelectRow的信给您.我在这里详细解释它是如何工作的. HTML页面的所有元素都支持DOM接口，其中包括onclick之类的方法.重要的是要了解事件处理(事件流)支持事件冒泡，这意味着向上传播将在父元素上一直持续到文档(请参见

I wrote you about beforeSelectRow already. I explain more detailed here how it works. All elements of HTML page are supports DOM interface, which includes the methods like onclick. It's important to understand that event processing (event flow) supports event bubbling, which means upward propagation will continue on parent elements up to the Document (see here). Any event handler may call the stopPropagation method of the Event interface to prevent further event propagation.

因此，如果用户单击表单元格的内部元素，则不仅会触发click事件处理程序，还将绑定到元素，还将事件处理程序绑定到父对象.如果您在table#grid上有网格，则可以按用途

Thus if the user click on internal elements of the table cells then the click event handlers will be fired not only bound to the elements, but the event handler bound to the parent objects. If you have grid on table#grid then you can register click handler on the whole grid by usage

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属性(请参见此处和此处).因此，$td[0].cellIndex是单击的列的索引，而colModel[$td[0].cellIndex].name是单击的列的名称(其中var colModel = $(this).jqGrid("getGridParam", "colModel")).如果需要获取rowid(行<tr>的id属性的值)，则可以使用$td.closest("tr.jqgrow").attr("id").

and the event handler will be called on click on any internal element of the grid (for example on <span class="myLink">some text</span>). The e.target gives us full information about the clicked element. We can use var $td = $(e.target).closest("td") or better var $td = $(e.target).closest("tr.jqgrow>td") to go on top of the DOM hierarchy till the cell of grid. The returned value will be jQuery wrapper to the DOM element, which represent <td> element. I start the name of the corresponding JavaSvript variable with $ to make the code more readable and to stress that it's jQuery wrapper. Thus $td[0] will be the DOM element. Every td DOM element supports cellIndex property (see here and here). Thus $td[0].cellIndex is the index of the column clicked and colModel[$td[0].cellIndex].name is the name of the column, which is clicked (where var colModel = $(this).jqGrid("getGridParam", "colModel")). If you need to get the rowid (the value of id attribute of the row <tr>) then you can use $td.closest("tr.jqgrow").attr("id").

jqGrid的现有代码包含类似的代码

The existing code of jqGrid contains the code like

...
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允许选择该行.

Thus one don't need to register additional click handler. One can use beforeSelectRow callback instead. One should just don't forget to return true to allows selection of the row.

演示 https://jsfiddle.net/wugfty1o/3/演示了beforeSelectRow.

这篇关于对jqGrid的所有页面启用editGridRow方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！