Question

我已经在列＆＃34; name＆＃34;中构建了带嵌入式复选框的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的新手，但它是一个很棒的工具，我想学习属性。请你能以这种方式开车送我吗？或者你能建议我在哪里找到我想做的例子吗？我查了一下文档，但没有成功。

非常感谢提前 JiheL

Answer 1

首先，我建议您不要在JSON数据中放置HTML片段。可以使用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在本地保存网格的加载项。因此，从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属性，所以对您来说没问题。

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

TreeGrid如何在标记父级时检查/取消选中所有子级别复选框

1 个答案: