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