jqgrid - TreeGrid如何在标记父级时选中/取消选中所有子级复选框

Question

我在“名称”列中构建了带有嵌入式复选框的 treeGrid，例如 JSON 数据:

{"id":"1","name":"<input type='checkbox' class='itmchk' ><strong>ECHANGEUR<\/strong>","level":"0","parent":"null","isLeaf":false,"expanded":true,"loaded":true}

因为这些复选框遵循树边距(我希望我很好理解，因为我是法国人)。

我想在标记/取消标记一行时选中/取消选中子级别复选框，但在阅读了可能的帖子后，我可以获得预期的结果。

举例说明:
如果我单击父行复选框(因此它变为 UNCHECKED)，则子级别行变为 UNCHECKED

我是 jqGrid 的新手，但它是一个很棒的工具，我想学习它的属性。
请问你能用这种方式开车吗？或者你能建议我在哪里可以找到我想做的例子吗？我查看了文档但没有成功。

提前谢谢了
继和

Answer 1

首先，我建议您不要将 HTML 片段放在 JSON 数据中。可以使用custom formatter在网格单元格中包含复选框:

formatter: function (cellvalue) {
    return "<input type='checkbox' class='itmchk' ><strong>" +
        $.jgrid.htmlEncode(cellvalue) + "</strong>";
}

要控制复选框的选中/取消选中，您可以使用 beforeSelectRow网格的回调。 jqGrid 内部绑定(bind) click事件到网格体。因此， event bubbling 元素上没有直接存在事件处理程序发生。它允许捕获检查/取消检查 任何复选框里面一个 beforeSelectRow打回来。 beforeSelectRow内部您应该首先测试是否单击了您要控制的复选框。

回电 beforeSelectRow有两个参数: rowid和 event object .楼盘 target事件对象将是用户单击的 DOM 元素。因为您添加了自定义 itmchk类到每个这样的复选框就足以验证单击元素上的类。

下一个问题是许多与 TreeGrid 一起使用的 jqGrid 方法，例如 getNodeChildren有 record作为输入参数，但您只有 rowid反而。 jqGrid 将加载的网格项目保存在本地。所以获取 record的最简单方法来自 rowid是使用 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属性(property)那么这对你来说不是问题。

对应的 demo表明上面的代码确实有效。这是对我通过回答您之前的问题创建的演示的修改。