jqgrid：获取单击复选框的行的ID答案

【问题标题】：jqgrid: get id of row where checkbox is clickedjqgrid：获取单击复选框的行的ID
【发布时间】：2011-11-04 02:54:18
【问题描述】：

加载网格后，我将点击处理程序绑定到包含复选框的列。

$("#mygrid td input").each(function () {
 $(this).click(function () {
 });
});

在这个点击处理程序中是否有一种巧妙的方法来获取与复选框所在行对应的记录的 pk/id，以便我可以使用它调用服务器？

【问题讨论】：

标签： jqgrid

【解决方案1】：

你可以使用jQuery.click事件的eventObject参数：

$("#mygrid td input").each(function () {
    $(this).click(function (e) {
        // e.target point to <input> DOM element
        var tr = $(e.target).closest('tr');
        alert ("Current rowid=" + tr[0].id);
    });
});

您应该只找到与jQuery.closest 相关的<tr>（表格行）元素，单击的<input> 元素所属的元素。 <tr> 元素的id 是您在填充网格时使用的rowid。

【讨论】：

你是救生员！
@Amete：不客气！答案很古老。今天我建议最好使用beforeSelectRow 来检测网格内的任何点击。 e.target 是被点击的元素。可以检测到单击它的行和列，并在单击复选框时使用.is(":checked")。来自the answer 的示例the demo 说明了我的意思。

【解决方案2】：

$("#treegrid").jqGrid({
        url: '${createLink(controller:"poa", action:"obtEstrucAreasDep")}',
        datatype: 'json',
        postData: {
            gestion: function() { return ${gestion}; }
        },
        mtype: 'GET',
        colNames: ["ID", "Nombre de Area", "Sigla", "Nivel", "Gener.HR", "Recep.HR", "Activo"],
        colModel: [
            {name:'id',    index:'id',    width:1,  hidden:true,  key:true},
            {name:'area',  index:'area',  width:95, hidden:false, sortable:true},
            {name:'sigla', index:'sigla', width:25, hidden:false, sortable:false, align:'center'},
            {name:'nivel', index:'nivel', width:1,  hidden:true,  align:'center'},
            {name:'genhr', index:'genhr', width:25, align:'center', editable: true, edittype:'checkbox', editoptions:{value:"True:False"}, formatter:"checkbox", formatoptions:{disabled:false}},
            {name:'recep', index:'recep', width:25, align:'center', editable: true, edittype:'checkbox', editoptions:{value:"True:False"}, formatter:"checkbox", formatoptions:{disabled:false}},
            {name:'activ', index:'activ', width:25, align:'center', editable: true, edittype:'checkbox', editoptions:{value:"True:False"}, formatter:"checkbox", formatoptions:{disabled:false}}
        ],
        treeGridModel: 'adjacency',
        height: 'auto',
        width: '500', //360
        treeGrid: true,
        ExpandColumn: 'area',
        ExpandColClick: true,
        caption: '${titulo}'+' - GESTION '+'${gestion}',
        onSelectRow: function(id){operRowJQGrid(id);}
    });

这是由 JuanFer 提供的

    jQuery(document).delegate('#treegrid .jqgrow td input', 'click', function(e){

        var tr = $(e.target).closest('tr');
        var rowid = tr[0].id;

        var $myGrid = jQuery('#treegrid');
        var i = $.jgrid.getCellIndex($(e.target).closest('td')[0]);
        var cm = $myGrid.jqGrid('getGridParam', 'colModel');
        var colName = cm[i].name;

        var y = $(this).val();
        var x = false

        if(y=='false'){
            $(this).val('true');
        }else{
            $(this).val('false');
        }
        x = $(this).val();
        alert("check = "+x+", id = "+rowid+", col name = "+colName);
    });

【讨论】：