如何使用可编辑的复选框在jq网格中获取选定的复选框行ID答案

【问题标题】：how to get selected checkbox row id in jq grid with editable checkbox如何使用可编辑的复选框在jq网格中获取选定的复选框行ID
【发布时间】：2015-05-30 03:04:31
【问题描述】：

  var data = [[48803,"true"], [48769,"true"]];

      $("#grid").jqGrid({
        datatype: "local",
        height: 250,
        colNames: ['Inv No','MyPrint'],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 60,
            sorttype: "int"},
      {
            name: 'MyPrint',
            index: 'MyPrint',
            width: 80,
            editoptions: { value: "True:False" },
            editrules: { required: true },
            edittype: 'checkbox',
            formatter: myPrintCheckboxFormatter,
            formatoptions: { disabled: false },
            editable: true  }    
        ],
        caption: "test example"
    });

    var names = ["id","true"];
    var mydata = [];

    for (var i = 0; i < data.length; i++) {
        mydata[i] = {};
        for (var j = 0; j < data[i].length; j++) {
            mydata[i][names[j]] = data[i][j];
        }
    }

    for (var i = 0; i <= mydata.length; i++) {
        $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
    }

    function myPrintCheckboxFormatter(cellvalue, options, rowObject) {
//how to pass currently selcted id of row
        return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow()'>";
    }

    function getCurrentBinRow() {
        /*here I want to get the current selected MyPrint row*/

 var id= $('#grid').jqGrid('getGridParam', 'selrow');  // id  becomes null  
   }

如何检索选定的行 id？，我已经尝试过，但得到了 null。我不明白如何从 onchange 事件 javascript 函数 getCurrentBinRow 传递它。我想将检查和未检查状态传递给服务器，如果你检查了行的 css 需要背景红色，并且在未检查 css 后需要在行

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

你可以这样做：

function myPrintCheckboxFormatter(cellvalue, options, rowObject) {
    return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow(this)'>";
} //---------------------------------------------------pass this in here-----^^^^

function getCurrentBinRow(elem) {
    var id = $(elem).closest('tr')[0].id;
    $(elem).closest('tr').toggleClass('redRow'); // adds red bgcolor when checked.
    alert(id);  
}

在您的样式表中添加这个 css：

.redRow{ background:red !important; }

更新：

你甚至可以这样做：

您在自定义格式化程序中有options 参数，其中有rowId 可用。所以你可以在 onchange 函数中传递options.rowId。

function myPrintCheckboxFormatter(cellvalue, options, rowObject) {
    return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow(" + options.rowId + ")'>";
} //-------------------------------------------------------pass this in here-----^^^^^^^^^^^^^^

function getCurrentBinRow(rowid) {
    alert(rowid);  
}

【讨论】：

如果选中，如何将背景颜色的css变为红色，如果未选中则转换为普通css
您可以创建一个新的 css 类，例如 .redRow{background:red !important;}，然后在第一个答案中您可以使用 .toggleClass() 添加/删除该类。
@govindaghimre 您现在可以检查更新的答案。您可以看到的第一部分。

【解决方案2】：

我不建议您使用自定义格式化程序来添加带有复选框的列。预定义的formatter: "checkbox" 已经这样做了。如果您使用formatoptions: { disabled: false}，则启用复选框。要在单击复选框时执行某些操作，最好在每个复选框上使用onchange='getCurrentBinRow()。事件冒泡允许仅在所有复选框的父级上注册一个事件处理程序。可能是tbody 或table。 jqGrid 已经在表格上注册了 onclick 事件处理程序，并允许使用 beforeSelectRow 和 onCellSelect 回调（jqGridBeforeSelectRow 或 jqGridCellSelect 事件）来实现一些自定义操作。为the answer 创建的The demo 或this one 演示了该方法。这是我向您推荐的方式。

最后一条评论。您发布的代码示例真的很糟糕。您应该使用 jqGrid 的data: mydata 选项来创建具有指定输入数据的网格。此外，还应使用gridview: true 和autoencode: true 选项。通过在循环中调用addRowData 来填充网格是填充网格的最慢方法。

【讨论】：