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

时间:2015-03-26 06:57:41

标签: jquery jqgrid

  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.i希望将已检查和未检查状态传递给服务器,如果你检查了行的css需要背景红色和未经检查的css需要在行

2 个答案:

答案 0 :(得分: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);  
}

答案 1 :(得分:0)

我建议您不要使用自定义格式化程序添加带有复选框的列。预定义的formatter: "checkbox"已经执行此操作。如果您使用formatoptions: { disabled: false},则会启用复选框。要点击复选框实施某些操作,最好在每个复选框上使用onchange='getCurrentBinRow()。事件冒泡允许仅在所有复选框的父级上注册一个事件处理程序。它可以是tbodytable。 jqGrid寄存器已经在桌面上onclick事件处理程序,并允许使用beforeSelectRowonCellSelect回调(jqGridBeforeSelectRowjqGridCellSelect事件)来实现一些自定义操作。为The demo创建的this onethe answer演示了该方法。这是我推荐你的方式。

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