首先,我建议您不要将 HTML 片段放在 JSON 数据中。可以使用custom formatter 在网格单元格中包含复选框:
formatter: function (cellvalue) {
return "<input type='checkbox' class='itmchk' ><strong>" +
$.jgrid.htmlEncode(cellvalue) + "</strong>";
}
要控制复选框的选中/取消选中,您可以使用网格的beforeSelectRow 回调。 jqGrid 内部将click 事件绑定到网格体。因此,event bubbling 发生的元素上没有直接存在事件处理程序。它允许在一个beforeSelectRow 回调中捕获对任何复选框 的选中/取消选中。在beforeSelectRow 内部,您应该首先测试它是否单击了您要控制的复选框。
回调beforeSelectRow 有两个参数:rowid 和event object。事件对象的属性target 将是用户单击的DOM 元素。因为您将自定义 itmchk 类添加到每个此类复选框,所以足以验证单击元素上的类。
下一个问题是,许多与 TreeGrid 一起使用的 jqGrid 方法(如 getNodeChildren)将 record 作为输入参数,但您只有 rowid。 jqGrid 将加载的网格项目保存在本地。所以从rowid获取record最简单的方法就是使用getLocalRow方法。
因此beforeSelectRow回调的代码可能如下:
beforeSelectRow: function (rowid, e) {
var $this = $(this),
isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field,
localIdName = $this.jqGrid("getGridParam", "localReader").id,
localData,
state,
setChechedStateOfChildrenItems = function (children) {
$.each(children, function () {
$("#" + this[localIdName] + " input.itmchk").prop("checked", state);
if (!this[isLeafName]) {
setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this));
}
});
};
if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) {
state = $(e.target).prop("checked");
localData = $this.jqGrid("getLocalRow", rowid);
setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state);
}
}
重要的是要提到子复选框将仅在以前加载的项目上被选中/取消选中。因为您一次加载网格的数据并使用loaded: true 属性,所以对您来说没问题。
对应的demo说明上面的代码确实有效。这是对我通过回答您之前的问题创建的演示的修改。