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

JQGrid Custom Formatter not working for button creation

我正在使用 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 之外,我对那些参数未定义。 我缺少什么?

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

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

在网格 (<table>) 元素上绑定 click 事件处理程序就足够了,因为 event bubbling. jqGrid registers already one click event handler. Thus you can just use beforeSelectRow instead of registering your own click handler. The second parameter of the beforeSelectRow callback is the Event object of the click. Thus one can use 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/