获取其按钮被点击的行的关键值

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

帮助或指针将不胜感激。

来源

2013-08-31 tariq

您的问题的主要解决方案如下：您需要在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); 
});

另外，你应该在你的代码来修复一些bug一些其他修改。的

name: '', index: ''

用法错误在colModel。您应该指定任何非空的唯一名称。例如name: 'mycheck'。

Next我建议你删除全部index属性从colModel。如果使用loadonce: true，则必须使用index属性，其值与相应的name值相同。如果你没有指定任何index属性，你将拥有更小和更好的可读代码。相应的index属性值将由jqGrid内部从相应的name值中复制。以同样的方式，你可以删除的属性，如stype: 'text', sortable: true其值是默认值（见the documentationDefault列）

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

下一条评论：我不建议您使用gridComplete。 loadComplete的用法比较好。有关该主题，请参阅my old answer。

最后一个重要的说法。要处理位于网格内的按钮上的click事件，您无需将单独的click句柄绑定到每个按钮。取而代之的是可以使用一个beforeSelectRow或onCellSelect回拨。 The answer和this on e描述了这一点。答案在自定义格式化程序中使用<a>，但<input>的工作方式完全相同。

来源

2013-08-31 07:54:17 Oleg

感谢您花时间写出如此全面的答案。得到它..事实上，我是jqGrid的新手，并且已经被分配了一个tweeking任务来更好地理解它..真的像你这样的程序员真正为StackOverflow增加了价值:) – tariq

@tariq：也谢谢！不用谢！ – Oleg

，可用于检索当单击该自定义按钮的行的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 
});

来源

2013-09-07 18:56:40 Ankit

获取其按钮被点击的行的关键值

回答

相关问题