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

时间:2012-12-10 23:35:27

标签: javascript jquery jquery-plugins jqxgrid

我有一个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个代表。抱歉这有点困惑。

3 个答案:

答案 0 :(得分:2)

使用此插件时,我遇到了类似的问题。

因此,我尝试使用复选框图像将click事件分配给元素,而不是内置事件。

此外,我注意到你没有绑定cellbeginedit或cellendedit事件..

$("#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 ......那应该完成工作..这就是我按照我的要求处理逻辑的方式。

答案 1 :(得分:0)

此示例使用'cellendedit'事件:checkboxes selection。当复选框的值发生变化时,会出现'cellendedit'。

答案 2 :(得分:0)

我能找到的最干净的方法是连接&#34; cellvaluechanged&#34;。这捕获了任何单元格值的变化。然后事件args告诉你列名,旧值,新值等。你仍然需要在行之后获取行中的一些唯一标识符,例如表的唯一键(例如)。 / p>

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