jqgrid复选框更改事件答案

【问题标题】：jqgrid checkbox change eventjqgrid复选框更改事件
【发布时间】：2011-08-30 18:27:55
【问题描述】：

我的数据库中有真/假值。我想用 jqgrid 中的复选框更新它们。一旦该值设置为 true，它将保持为 true 并且不应更改。请看一下我的专栏模型：

{
    name : 'available',
    width : 12,
    resizable: true,
    editable: true,
    align: 'center',
    edittype:'checkbox',
    formatter: "checkbox", formatoptions: {disabled : false},
    classes:'check',
    editrules:{required:false}, editoptions:{size:39,value:"True:False"}
}

我正在尝试在选中复选框时捕获事件，目前它们都未选中，到目前为止我已经尝试过：

jq(".check input").each(function(){
    jq(this).click(function(){
        aler("works");
    });
});

jq("input[type='checkbox']").change(function(){
    alert("works");
}); 

jq(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = jq(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
        alert("");
    }
});

这些都不起作用，我被卡住了，不知道还能尝试什么。

当使用 firebug 检查复选框代码时，它看起来像这样：

<input type="checkbox" offval="no" value="false">

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

您可以创建自定义格式化程序。在您的网格中，

formatter: cboxFormatter,

然后定义函数，

function cboxFormatter(cellvalue, options, rowObject)
{
  return '<input type="checkbox"' + (cellvalue ? ' checked="checked"' : '') + 
      'onclick="alert(' + options.rowId + ')"/>';
}

您可以使用onclick 来执行您的任务或调用函数。

【讨论】：

【解决方案2】：

自定义格式化程序的使用是其中一种可能性。也可以使用不显眼的onclick绑定样式

第一个定义

var grid = $("#list"),
    getColumnIndexByName = function(columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
        for (; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    },
    disableIfChecked = function(elem){
        if ($(elem).is(':checked')) {
            $(elem).attr('disabled',true);
        }
    };

然后就可以使用loadComplete中的类似代码了

loadComplete: function() {
    var i=getColumnIndexByName('closed');
    // nth-child need 1-based index so we use (i+1) below
    $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",
      this).click(function(e) {
        disableIfChecked(this);
    }).each(function(e) {
        disableIfChecked(this);
    });
}

查看对应的demohere。

【讨论】：

为什么需要“每个”？是否在加载时根据值禁用，但在任何用户交互之前？
@dtroy：each 循环需要在加载内容后直接从指定列的每个单元格上调用disableIfChecked。在单击复选框后，click 内部的调用再次调用disableIfChecked。这是一个古老的答案。现在我更喜欢不要将 separate 绑定到列中的每个单元格。看看the answer 和the answer。
奥列格，你是 JQGrid 的救星！ :)
@will824：谢谢！如果我的回答能帮到你，我很高兴。
@Oleg 不仅您帮助了我，还帮助了我们所有的团队。我们甚至开玩笑说您是 JQGrid 开发人员的二手货，或者如果您消失，我们将陷入困境：D

【解决方案3】：

这对我有用：

    // Listen for Click Events on the 'Process' check box column
    $(document).on("click", "td[aria-describedby='grdOrders_Process']", function (e) {
        var checked = $(e.target).is(":checked")

        var rowId = $(e.target).closest("tr").attr("id")
        rowData = jQuery("#grdOrders").getRowData(rowId);

        alert("Checked: " + checked)
        alert("OrderNo: " + rowData.OrderNo);
        alert("Name: " + rowData.Name);
    });

【讨论】：