JQGrid自定义格式化程序不适用于按钮创建 [英] JQGrid Custom Formatter not working for button creation

问题描述

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

I am using JQGrid customer formatter for creating button but button not showing.

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之外，这些参数没有定义. 我想念的是什么?

In alert method I am getting undefined for those parameter except the rowObject. What I am missing?

推荐答案

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

First of all, I think that there exist some misunderstanding how jqGrid uses custom formatter. jqGrid build the whole jqGrid body (<tbody>) as one string. By default jqGrid place the cell data directly in the cell, buy using formatter one can place another string instead as the content of the cells of the column (the content of<td> elements). Thus the custom formatter have to return the string. You current viewLineBtn function returns undefined.

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

The next problem. jqGrid calls custom formatter for all rows of the page, build <tbody>, insert it in the grid and only after that one could make the binding to click event.

将click事件处理程序绑定到网格(<table>)元素上就足够了，由于事件对象 click.因此，可以使用 event.target 来获取所有必需的信息.无需设置rowid.尤其是您当前的代码在按钮上为分配了相同的id值，就像rowid(外排的id)一样.

It's enough to bind click event handler on the grid (<table>) element and the event handler will be called on click on any internal element of the grid because of 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 to get all required information. No rowid is required to set. Especially your current code assign the same id value on the button like the rowid (the id of the outer row).

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

One don't need assign any id to the button and use $(e.target).closest("tr.jqgrow").attr("id") instead to get the rowid.

带有按钮的列的最终定义例如可以是:

The final definition of the column with the button could be for example the following:

{ 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/

这篇关于JQGrid自定义格式化程序不适用于按钮创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！