[英]Get the key value of the row of whose cusstom button has been clicked
我发现自己需要一个微不足道的要求。 我有一个jqGrid,其中我在每行中添加了一个自定义按钮。 现在我可以将客户端单击事件与其关联,但是我想知道在其自定义按钮被单击的行的情况下的键值(Id),以便我可以继续使用此ID并做我想做的一切做。
我的jqGrid代码如下
jQuery("#JQGrid").jqGrid({
url: 'http://localhost:55423/JQGrid/JQGridHandler.ashx',
datatype: "json",
colNames: ['', 'Id', 'First Name', 'Created Date', 'Member Price', 'Non Member Price', 'Complete', 'customButton'],
colModel: [
{ name: '', index: '', width: 20, formatter: "checkbox", formatoptions: { disabled: false} },
{ name: 'Id', index: 'Id', width: 20, stype: 'text', sortable: true, key: true },
{ name: 'FirstName', index: 'FirstName', width: 120, stype: 'text', sortable: true },
{ name: 'CreatedDate', index: 'CreatedDate', width: 120, editable: true, sortable: true, hidden: true, editrules: { edithidden: true} },
{ name: 'MemberPrice', index: 'MemberPrice', width: 120, editable: true, sortable: true },
{ name: 'NonMemberPrice', index: 'NonMemberPrice', width: 120, align: "right", editable: true, sortable: true },
{ name: 'Complete', index: 'Complete', width: 60, align: "right", editable: true, sortable: true },
{ name: 'customButton', index: 'customButton', width: 60, align: "right" }
],
rowNum: 10,
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridPager',
sortname: 'Id',
viewrecords: true,
sortorder: 'desc',
caption: "List Event Details",
gridComplete: function () {
jQuery(".jqgrow td input", "#JQGrid").click(function () {
//alert(options.rowId);
alert("Capture this event as required");
});
}
});
jQuery('#JQGrid').jqGrid('navGrid', '#jQGridPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext:"Delete"
},
{/*EDIT EVENTS AND PROPERTIES GOES HERE*/ },
{/*ADD EVENTS AND PROPERTIES GOES HERE*/},
{/*DELETE EVENTS AND PROPERTIES GOES HERE*/},
{/*SEARCH EVENTS AND PROPERTIES GOES HERE*/}
);
帮助或任何指针将不胜感激。
以下是您问题的主要解决方案:您需要在click
handle的回调中包含参数,例如e
。 该参数具有包含目标属性的事件对象类型。 或者,您可以在大多数情况下使用this
。 使用e.target
可以转到最接近的父<tr>
元素。 id
是您需要的值:
jQuery(this).find(".jqgrow td input").click(function (e) {
var rowid = $(e.target).closest("tr").attr("id");
alert(rowid);
});
另外,您应该在代码中进行其他修改以修复一些错误。 的用法
name: '', index: ''
在colModel
是错误的。 您应该指定任何非空的唯一名称。 例如name: 'mycheck'
。
接下来,我建议您从colModel
删除所有index
属性。 如果使用loadonce: true
,则必须使用具有与相应name
值相同的值的index
属性。 如果您不指定任何index
属性,那么您的代码将更小且可读性更好。 index
属性的相应值将由jqGrid在内部从相应的name
值中复制。 同样,您可以删除stype: 'text', sortable: true
类的属性stype: 'text', sortable: true
其中哪些值为默认值(请参见文档的 Default
列)
下一个问题是您可能在服务器的JSON响应中包括HTML数据。 (例如,看不到customButton
任何格式化程序)。 这不好。 这样,如果网格文本包含特殊的HTML符号,则可能会遇到问题。 我发现最好在服务器的JSON响应中使用纯数据 。 可以在客户端使用格式化程序, 自定义格式化程序等。 在这种情况下,可以使用autoencode: true
选项,对网格中显示的所有文本进行HTML编码。 这样,您将获得更安全的代码,不允许任何注入(例如,在数据编辑期间不包括JavaScript代码)。
下一个备注:我不建议您使用gridComplete
。 loadComplete
的用法更好。 请参阅我关于该主题的旧答案 。
最后一句话。 要处理放置在网格内部的按钮的click
事件, 不需要将单独的click
句柄绑定到每个按钮 。 取而代之的是一个可以使用一个 beforeSelectRow
或onCellSelect
回调。 答案及其在 e上描述了这一点。 答案在自定义格式程序中使用<a>
,但是<input>
工作方式完全相同。
可以用来检索单击自定义按钮的行的ID的另一种方法是,将格式化程序添加到自定义按钮cloumn中
{ name: 'customButton', index: 'customButton', width: 60, align: "right",
formatter: function ( cellvalue, options, rowObject ) {
return "<input type='button' class='custom-button' id='custom"+ rowObject.id +"'/>";
}
}
现在每个按钮都有行ID
$('input[id^="custom"]').click(function() {
var id = this.attr('id').replace("custom", ""); // required row ID
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.