Question

这是此post的后续内容。我理解父节点如何选择所有子节点。我有一个TreeGrid，至少有3个级别的节点，每个2级节点都有多个叶子节点。我可以单击2级节点来选择其下的所有叶节点，但是如果我取消选中所有叶节点，我想更新节点的祖先。所以我正在寻找一种方法，不仅可以将事件冒泡到子节点，还可以查看已检查/未选中节点的父节点。另外，将二级节点的复选框显示为灰色表示并非选中该节点下的所有叶子都是很好的。

Answer 1

经过一番挖掘后，我找到了一种方法，可以使用原始帖子中的代码和我自己的一些代码来完成这项工作。当单击jqgrid树网格中的复选框时，这将使节点的子节点和节点的父节点保持同步。

   beforeSelectRow: function (rowid, e) { 
            var $this = $(this),
                isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field,
                localIdName = $this.jqGrid("getGridParam", "localReader").id,
                localData,
                state,
                parentState,
                parentChildren,
                setChechedStateOfChildrenItems = function (children) {
                    $.each(children, function () {
                        $("#" + this[localIdName] + " input.itmchk").prop("checked", state);
                        updateSelectedNode(row_id, this[localIdName], state);
                        if (!this[isLeafName]) {
                            setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this));
                        }
                    });
                },
                setCheckedStateofParentItems = function (parent) {
                    parentChildren = $this.jqGrid("getNodeChildren", parent);
                    var selectedChildren = 0;
                    $.each(parentChildren, function () {
                        if ($("#" + this.id + " input.itmchk").prop("checked")) {
                            selectedChildren += 1;
                        }
                    });
                    if (selectedChildren == 0) {
                        parentState = false;
                    } else {
                        parentState = true;
                    }
                    updateSelectedNode(row_id, parent.id, parentState);
                    $("#" + parent.id + " input.itmchk").prop("checked", parentState);

                    if (parent.parent != null) {
                        setCheckedStateofParentItems($this.jqGrid("getLocalRow", parent.parent), state)
                    }
                }

            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);
                setCheckedStateofParentItems($this.jqGrid("getLocalRow", localData.parent), state)
                updateSelectedNode(row_id, localData.id, state); //this does the checkbox we checked
            }
        },

单元格格式化程序部分：

{
        name: 'name', width: 25, index: 'name', label: "ColumnName", labelAlign: "left",
        formatter: function (cellvalue, options, rowObject) {
            var result = "<input type='checkbox' class='itmchk' checked> &nbsp;" + $.jgrid.htmlEncode(cellvalue);
            if (rowObject.selected == false) {
                result = result.replace("checked", "");
            }
            return result;
        }
    }

Treegrid如何从子节点检查/取消选中父节点

1 个答案: