TreeGrid如何在选中父级时检查/取消所有子级复选框的勾选状态

Question

TreeGrid如何在选中父级时检查/取消所有子级复选框的勾选状态

4

我已经建立了一个带有嵌入式复选框的treeGrid，位于“name”列中，例如JSON数据：

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

因为这些复选框遵循树形边距（我希望我的意思能够被理解，因为我是法国人）。

我想在标记/取消标记一行时检查/取消检查子级复选框，但在阅读了许多帖子后，我无法得到预期的结果。

例如说明：如果我单击父行复选框（因此它变为未选中状态），则子级行将变为未选中状态。

我是jqGrid的新手，但它是一个我想要学习属性的伟大工具。请您能引导我吗？或者您可以建议我在哪里可以找到我想要做的示例吗？我查看了文档，但没有成功。

非常感谢 JiheL

- JiheL

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

首先，我建议您不要将HTML片段放在JSON数据中。可以使用自定义格式化程序在网格单元格内包含复选框：

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

为了控制复选框的选择/取消选择，您可以使用网格的beforeSelectRow回调。jqGrid内部将click事件绑定到网格主体上。因此，如果元素上不存在事件处理程序，则会发生事件冒泡。它允许在一个beforeSelectRow回调中捕获任何复选框的选择/取消选择。在beforeSelectRow中，您应该首先测试是否点击了要控制的复选框。

回调beforeSelectRow有两个参数：rowid和事件对象。事件对象的target属性将是用户单击的DOM元素。因为您为每个这样的复选框添加了自定义itmchk类，所以仅验证单击元素上的类就足够了。

下一个问题是，许多像getNodeChildren这样与TreeGrid一起使用的jqGrid方法具有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 属性，所以这对您来说不是问题。

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