jqgrid复选框更改事件

Lon*_*don 7 javascript jquery jqgrid

我的数据库中有true/false值.我想用jqgrid中的复选框更新它们.一旦该值设置为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"}
}
Run Code Online (Sandbox Code Playgroud)

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

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("");
    }
});
Run Code Online (Sandbox Code Playgroud)

这些都不起作用,我被卡住了不知道还有什么可以尝试.

使用firebug检查复选框代码时,它看起来像这样:

<input type="checkbox" offval="no" value="false">
Run Code Online (Sandbox Code Playgroud)

hyp*_*lug 7

您可以创建自定义格式化程序.在你的网格中,

formatter: cboxFormatter,
Run Code Online (Sandbox Code Playgroud)

然后定义函数,

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

您可以onclick用来执行任务或调用函数.


Ole*_*leg 5

自定义格式化程序的使用是可能性之一。也可以使用不显眼的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);
        }
    };
Run Code Online (Sandbox Code Playgroud)

然后可以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);
    });
}
Run Code Online (Sandbox Code Playgroud)

此处查看相应的演示。