Получите ключевое значение строки, на которую нажата кнопка cusstom.

Question

Я понял, что мне нужно, что я думаю, должно быть тривиальным требованием. У меня есть jqGrid, в котором я добавил пользовательскую кнопку в каждой строке. теперь я могу связать с клиентом событие клика с ним, но я хочу узнать значение ключа (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

Главное решение проблемы в следующем: вам нужно включить параметр, например e, в обратном вызове click. Параметр имеет 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'.

Далее Я рекомендую вам удалить все index Недвижимость от colModel. Если вы используете loadonce: true, вы должны использовать свойства index с теми же значениями, что и соответствующие значения name. Если вы не укажете какие-либо объекты index, у вас будет меньше и лучше читаемый код. Соответствующие значения свойств index будут скопированы jqGrid из соответствующих значений name. Таким же образом можно удалить свойства, как stype: 'text', sortable: true, какие значения по умолчанию значения (см Default столбец the documentation)

Следующая проблема заключается в том, что вы включаете вероятно HTML данные в ответ JSON от сервера. (Например, для customButton нет форматирования). Это не хорошо. В способе у вас могут возникнуть проблемы, если в текстах из сетки содержатся специальные символы HTML. Я считаю, что лучше использовать чистые данные в ответе JSON с сервера. На стороне клиента можно использовать форматирование, custom formatters и т. Д. В случае можно использовать опцию jqGrid autoencode: true, которая делает HTML-кодирование всех текстов, отображаемых в сетке. В том, как у вас будет более безопасный код, который не позволит вводить инъекции (например, без включения кода JavaScript во время редактирования данных).

следующее замечание: я не рекомендую использовать gridComplete. Лучше использовать использование loadComplete. См. my old answer о предмете.

Последнее важное примечание. Для обработки click событий на кнопках, расположенных внутри сетки не нужно связывать отдельно click ручка каждой кнопки.Вместо этого можно использовать одинbeforeSelectRow или onCellSelect callback. The answer и this on e описать это. Ответы используют <a> в пользовательском форматировании, но <input> работает точно так же.

Answer 2

Другого подхода, который может быть использован для получения идентификатора строки, для которой нажата кнопка заказа, добавляя форматировщик к вашей кнопке пользовательских 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 +"'/>"; 
    } 
} 

Теперь каждая кнопка имеет идентификатор строки

$('input[id^="custom"]').click(function() { 
    var id = this.attr('id').replace("custom", ""); // required row ID 
});