[英]Get the key value of the row of whose cusstom button has been clicked
I found myself in need of what i guess should be a trivial requirement. 我发现自己需要一个微不足道的要求。 i have a jqGrid in which i have added a custom button in each row.
我有一个jqGrid,其中我在每行中添加了一个自定义按钮。 now i am able to associate a client side click event with it but i want to know the key value (Id) in my case of the row whose custom button was clicked, so that i can proceed with this id and do whatever i want to do.
现在我可以将客户端单击事件与其关联,但是我想知道在其自定义按钮被单击的行的情况下的键值(Id),以便我可以继续使用此ID并做我想做的一切做。
My code for jqGrid is as below 我的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*/}
);
Help or any pointers would be much appreciated. 帮助或任何指针将不胜感激。
The main solution of your problem in the following: you need include parameter, for example e
, in the callback of click
handle. 以下是您问题的主要解决方案:您需要在
click
handle的回调中包含参数,例如e
。 The parameter has Event object type which contain target property. 该参数具有包含目标属性的事件对象类型。 Alternatively you can use
this
in the most cases. 或者,您可以在大多数情况下使用
this
。 Having e.target
you can goes to the closest parent <tr>
element. 使用
e.target
可以转到最接近的父<tr>
元素。 It's id
is the value which you need: id
是您需要的值:
jQuery(this).find(".jqgrow td input").click(function (e) {
var rowid = $(e.target).closest("tr").attr("id");
alert(rowid);
});
Additionally you should make some other modifications in your code to fix some bugs. 另外,您应该在代码中进行其他修改以修复一些错误。 The usage of
的用法
name: '', index: ''
is wrong in colModel
. 在
colModel
是错误的。 You should specify any non-empty unique name. 您应该指定任何非空的唯一名称。 For example
name: 'mycheck'
. 例如
name: 'mycheck'
。
Next I recommend you to remove all index
properties from colModel
. 接下来,我建议您从
colModel
删除所有index
属性。 If you use loadonce: true
you have to use index
properties with the same values as the corresponding name
values. 如果使用
loadonce: true
,则必须使用具有与相应name
值相同的值的index
属性。 If you don't specify any index
properties you will have smaller and better readable code. 如果您不指定任何
index
属性,那么您的代码将更小且可读性更好。 The corresponding values of index
properties will be copied by jqGrid internally from the corresponding name
values. index
属性的相应值将由jqGrid在内部从相应的name
值中复制。 In the same way you can remove properties like stype: 'text', sortable: true
which values are default values (see Default
column of the documentation ) 同样,您可以删除
stype: 'text', sortable: true
类的属性stype: 'text', sortable: true
其中哪些值为默认值(请参见文档的 Default
列)
The next problem is that you include probably HTML data in the JSON response from the server. 下一个问题是您可能在服务器的JSON响应中包括HTML数据。 (One can't see any formatter for
customButton
for example). (例如,看不到
customButton
任何格式化程序)。 It's not good. 这不好。 In the way you can have problems if the texts of the grid contains special HTML symbols.
这样,如果网格文本包含特殊的HTML符号,则可能会遇到问题。 I find better to use pure data in JSON response from the server.
我发现最好在服务器的JSON响应中使用纯数据 。 One can use formatters, custom formatters etc on the client side.
可以在客户端使用格式化程序, 自定义格式化程序等。 In the case one can use
autoencode: true
option of jqGrid which make HTML encoding of all texts displayed in the grid. 在这种情况下,可以使用
autoencode: true
选项,对网格中显示的所有文本进行HTML编码。 In the way you will have more safe code which will don't allow any injection (for example no including of JavaScript code during editing of data). 这样,您将获得更安全的代码,不允许任何注入(例如,在数据编辑期间不包括JavaScript代码)。
Next remark: I don't recommend you to use gridComplete
. 下一个备注:我不建议您使用
gridComplete
。 The usage of loadComplete
is better. loadComplete
的用法更好。 See my old answer about the subject. 请参阅我关于该主题的旧答案 。
The last important remark. 最后一句话。 To handle
click
events on the buttons placed inside of grid one don't need to bind separate click
handle to every button . 要处理放置在网格内部的按钮的
click
事件, 不需要将单独的click
句柄绑定到每个按钮 。 Instead of that one can use one beforeSelectRow
or onCellSelect
callback. 取而代之的是一个可以使用一个
beforeSelectRow
或onCellSelect
回调。 The answer and this on e describe this. 答案及其在 e上描述了这一点。 The answers use
<a>
in custom formatter, but <input>
works exactly in the same way. 答案在自定义格式程序中使用
<a>
,但是<input>
工作方式完全相同。
Another approach that can be used to retrieve the id of the row for which the custom button is clicked is by adding formatter to your custom button cloumn 可以用来检索单击自定义按钮的行的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 +"'/>";
}
}
Now every button has the row 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.