JQGrid 自定义格式化程序不适用于按钮创建答案

【问题标题】：JQGrid Custom Formatter not working for button creationJQGrid 自定义格式化程序不适用于按钮创建
【发布时间】：2017-03-04 18:32:21
【问题描述】：

我正在使用 JQGrid 客户格式化程序来创建按钮，但按钮未显示。

function viewLineBtn(cellvalue, options, rowObject) {
    alert(cellvalue +","+options+","+rowObject);
    var rowid = options.rowid;
    var button = "<button class=\"viewLineItem\" id=" + rowid + ">View Line   Item</button>"
    $('#' + rowid).die();
    $('#' + rowid).live('click', function(rowId) {
        alert("hi");
        alert(rowId);
    });
}

在警报方法中，除了 rowObject 之外，我对那些参数没有定义。我错过了什么？

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

首先，我认为jqGrid如何使用自定义格式化程序存在一些误解。 jqGrid 将整个 jqGrid 主体 (<tbody>) 构建为一个字符串。默认情况下jqGrid将单元格数据直接放在单元格中，使用格式化程序可以放置另一个字符串作为列单元格的内容（<td>元素的内容）。因此自定义格式化程序必须返回字符串。你当前的viewLineBtn 函数返回undefined。

下一个问题。 jqGrid 为页面的所有行调用自定义格式化程序，构建<tbody>，将其插入网格中，然后才能绑定到click 事件。

在网格 (<table>) 元素上绑定click 事件处理程序就足够了，并且由于event bubbling，在单击网格的任何内部元素时将调用事件处理程序。 jqGrid 已经注册了一个click 事件处理程序。因此，您可以只使用 beforeSelectRow 而不是注册自己的 click 处理程序。 beforeSelectRow回调的第二个参数是click的Event object。因此可以使用event.target 来获取所有需要的信息。无需设置rowid。尤其是您当前的代码在按钮上分配 相同的 id 值，例如 rowid（外行的 id）。

不需要为按钮分配任何 id，而是使用$(e.target).closest("tr.jqgrow").attr("id") 来获取 rowid。

带有按钮的列的最终定义例如如下：

{ name: "mybutton", width: 100, sortable: false,
    resizable: false, hidedlg: true, search: false, align: "center",
    fixed: true, viewable: false,
    formatter: function () {
        return "<button class=\"viewLineItem\">View Line Item</button>";
    }
}

beforeSelectRow 的代码可以是

beforeSelectRow: function (rowid, e) {
    if ($(e.target).is("button.viewLineItem")) {
        alert($(e.target).closest("tr.jqgrow").attr("id"));
        return false; // don't select the row on click on the button
    }
    return true; // select the row
}

查看演示https://jsfiddle.net/OlegKi/x0j55z1m/

【讨论】：