Treegrid如何从子节点中选中/取消选中父节点答案

【问题标题】：Treegrid how to check/uncheck parent node from children nodesTreegrid如何从子节点中选中/取消选中父节点
【发布时间】：2017-03-28 01:18:13
【问题描述】：

这是此post 的后续内容。我了解父节点如何选择所有子节点。我有一个至少有 3 级节点的 TreeGrid，每个 2 级节点都有多个叶节点。我可以点击level 2节点来选择它下面的所有叶子节点，但是如果我取消选中所有叶子节点，我想更新节点的祖先。因此，我正在寻找一种方法，不仅可以将事件冒泡给孩子，而且还可以将选中/未选中节点的父级传递给父级。此外，最好将 2 级节点的复选框显示为灰色，表示并非该节点下的所有叶子都被选中。

【问题讨论】：

标签： jqgrid treegrid

【解决方案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;
        }
    }

【讨论】：