Question

我正在使用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);
    });
}

在alert方法中，除了rowObject之外，我的参数未定义。我缺少什么？

Answer 1

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

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

在网格（click）元素上绑定<table>事件处理程序就足够了，并且因为event bubbling而点击网格的任何内部元素时将调用事件处理程序。 jqGrid已经注册了一个click事件处理程序。因此，您只需使用beforeSelectRow而不是注册自己的click处理程序。 beforeSelectRow回调的第二个参数是click的{{3}}。因此，可以使用Event object来获取所有必需的信息。设置不需要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
}

请参阅演示event.target

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

1 个答案: