网格捕获复选框中的 jqWidget CheckBox 更改答案

【问题标题】：jqWidget CheckBox in grid capture checkbox change网格捕获复选框中的 jqWidget CheckBox 更改
【发布时间】：2012-12-10 23:35:26
【问题描述】：

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

changed
cellbeginedit
cellendedit
cellvaluechanged
cellvaluechanging

。一切都无济于事。

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

关于如何实现这一点的任何想法？
我已经包含了下面的代码。
复选框是“重新认证”行

$("#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 个代表。抱歉，这会造成混淆。

【问题讨论】：

标签： javascript jquery jquery-plugins jqxgrid

【解决方案1】：

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

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

我还注意到您没有绑定 cellbeginedit 或 cellendit 事件..

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

并从定义中删除事件并像上面一样绑定它

{ 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 event...这应该可以完成工作...这就是我处理我的要求的逻辑的方式。

【讨论】：

谢谢 Sushanth，我已经删除了我尝试过的不同的东西，只在问题中放置了最新版本。我的问题是我只想为这个特定的列捕获这个事件。您提供的解决方案将针对所有更改触发。你认为有办法只获取一个列的事件吗？

【解决方案2】：

此示例使用“cellendit”事件：checkboxes selection。更改复选框的值时会引发“cellendedit”。

【讨论】：

【解决方案3】：

我能找到的最简洁的方法是连接“cellvaluechanged”。这会捕获任何单元格值的变化。然后事件 args 会告诉您列名、旧值、新值等。您可能仍然需要在行之后从行中获取一些唯一标识符，例如表的唯一键（例如）。

    $("#grid").on("cellvaluechanged", function (event) {
        var theKey = $("#grid").jqxGrid("getcellvalue", event.args.rowindex, "key");
        doSomething(theKey, event.args.newvalue);
    });

【讨论】：