獲取其按鈕被點擊的行的關鍵值

我發現自己需要我認爲應該是一個微不足道的要求。我有一個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

獲取其按鈕被點擊的行的關鍵值

回答

相關問題