javascript - jqWidget CheckBox 在网格捕获复选框变化

Question

我有一个 jqxGrid，里面有几个复选框。 我需要做的是找到一个在更改复选框时触发的事件。 我试过:

• 已更改
• cellbeginedit
• cellendedit
• cellvaluechanged
• cellvaluechanging

. 一切都无济于事。

我不想在更改任何单元格时触发和事件，只是这个复选框。

关于如何实现这一点有什么想法吗？
我已经包含了下面的代码。
复选框是'Re-Cert'行

$("#ModulesGrid").jqxGrid({
        width: 890,
        height: 350,
        theme: modulesTheme,
        columnsresize: true,
        source: dataAdapter,
        pageable: true,
        editable: true,
        columns: [
                  { text: 'Module Name', datafield: 'modulename', width: 100, editable: false },
                  { text: 'Optional', datafield: 'Optional', columntype: 'checkbox', width: 100 },
                  { text: 'Assigned', datafield: 'Assigned', width: 80 , columntype: 'checkbox'},
                  { text: 'Pass', datafield: 'pass',cellsrenderer: radioRenderer,width: 50, editable: false },
                  { text: 'NC', datafield: 'nc',cellsrenderer: radioRenderer,width: 50, editable: false },
                  { text: 'Fail', datafield: 'fail',cellsrenderer: radioRenderer,width: 50, editable: false },
                  { text: 'Re-Cert', datafield: 'recert', columntype: 'checkbox', width: 50, cellvaluechanged: function(event){alert(1);}},
                  { text: 'Re-Cert Reason', datafield: 'reason', width: 100, editable: false},
                  { text: 'Prior Cert', datafield: 'priorcert', width: 50, editable: false }
              ]
    });

这是 API 的链接:http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

编辑:它不会让我在 jqWidget 下标记它，因为该标记不存在并且我没有 1500 代表。抱歉，这让您感到困惑。

Answer 1

我在使用这个插件时遇到了类似的问题。

因此，我尝试使用复选框图像并将事件分配给图像来将点击事件分配给元素，而不是内置事件。

我还注意到您没有绑定(bind) cellbeginedit 或 cellendedit 事件..

$("#ModulesGrid").bind('cellbeginedit', function (event) {
     var args = event.args;
  alert("Column: " + args.datafield + ",
           Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});

然后从定义中删除事件并像上面那样绑定(bind)它

{ text: 'Re-Cert', datafield: 'recert', columntype: 'checkbox', width: 50 },

更新

如果是这种情况，您可以处理该特定列的 cellsrenderer 方法。

var columncheckboxRenderer = function(row, column, value) {
    var html;
        html = '<span style="margin:4px;float:left" onclick="clickImage(this,'
                + row + ')"><img alt="selectme" class="image-unchecked" '  
                +  src="../../Images/checkbox_off.png"/></span>';

    return html;
}

{ text: 'Re-Cert', datafield: 'recert',  width: 50,
          cellsrenderer: columncheckboxRenderer, renderer: header},

然后为复选框编写click 事件...这应该完成...的工作。这就是我处理我的需求逻辑的方式。