获取自定义按钮被点击所在行的键值

Question

我发现自己需要我认为应该是微不足道的要求。我有一个 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*/}
 ); 

帮助或任何指针将不胜感激。

Answer 1

您的问题的主要解决方案如下：您需要在click句柄的回调中包含参数，例如e。该参数具有Event object 类型，其中包含target 属性。或者，在大多数情况下，您可以使用 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 这样的属性，这些属性的值是默认 值（参见Defaultthe documentation 的列）

下一个问题是您可能在来自服务器的 JSON 响应中包含 HTML 数据。 （例如，看不到customButton 的任何格式化程序）。这样不好。如果网格的 texts 包含特殊的 HTML 符号，您可能会遇到问题。我发现在来自服务器的 JSON 响应中使用 pure data 更好。可以在客户端使用格式化程序、custom formatters 等。在这种情况下，可以使用 jqGrid 的autoencode: true 选项，它可以对网格中显示的所有文本进行 HTML 编码。这样您将拥有更安全的代码，不允许任何注入（例如，在编辑数据期间不包含 JavaScript 代码）。

下一句：我不建议你使用gridComplete。 loadComplete 的用法更好。有关该主题，请参阅my old answer。

最后一句重要的话。要处理放置在网格内的按钮上的click 事件不需要将单独的click 句柄绑定到每个按钮。而不是那个可以使用 one beforeSelectRow 或 onCellSelect 回调。 The answer 和 this one 对此进行了描述。答案在自定义格式化程序中使用 <a>，但 <input> 的工作方式完全相同。

Answer 2

另一种可用于检索单击自定义按钮的行的 ID 的方法是将格式化程序添加到自定义按钮列

{ 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
});