隐藏节点如何实现上下级关联

wjfang90 commented 2 years ago

有个需求是勾选当前节点，自动勾选子级和父级节点，用的checkbox做的勾选功能，使用callback中的onCheck 回调做的，没有使用setting.check.chkboxType 属性设置自动关联，在修改数据的初始化数据时，没法显示原来的值了还有一个搜索功能，用fuzzySearch做的搜索现在问题是没有搜索到的节点不能实现上下级关联，因为treeObj.checkNode 不启作用没有搜索的节点都是isHidden 为true的，我直接设置 node 的checked为true，但从treeObj.getCheckedNodes 中取不到隐藏节点。希望有能力的能帮忙解答下

zTree commented 2 years ago

关于 checkbox的问题不太清楚你问的是什么？ “在修改数据的初始化数据时，没法显示原来的值了” 这句话也很模糊，不明白意思。再就是 onCheck 里面做了什么，怎么做的？
建议你直接用 zTree 自己提供的 getNodesByFilter 方法做自定义的遍历搜索

wjfang90 commented 2 years ago

关于 checkbox的问题不太清楚你问的是什么？ “在修改数据的初始化数据时，没法显示原来的值了” 这句话也很模糊，不明白意思。再就是 onCheck 里面做了什么，怎么做的？

建议你直接用 zTree 自己提供的 getNodesByFilter 方法做自定义的遍历搜索

感谢回复比如，我的数据是

var zNodes =[ { id:1, pId:0, name:"1", open:true}, { id:11, pId:1, name:"1-1", open:true}, { id:111, pId:11, name:"1-1-1"}, { id:112, pId:11, name:"1-1-2"}, { id:12, pId:1, name:"1-2", open:true}, { id:121, pId:12, name:"1-2-1"}, { id:122, pId:12, name:"1-2-2"} ];

我在树上检索 1-1 ，这时树节点只显示 1-1 这一个节点，我勾选 1-1这个节点，我要实现把 1 和 1-1-1 这两个节点都勾选上，在onCheck回调中使用 treeObj.checkNode() 勾选，但是这两个节点都没有勾选上，下面是我的代码，麻烦你看看

`
$(document).ready(function () {

        var setting = {
            check: {
                enable: true,
                chkboxType: {
                    "Y": "",//被勾选时：关联父 p 关联子 s, ""表示不关联父子
                    "N": "ps"//取消勾选时：关联父p 关联子 s
                }
            },
            view: {                
                selectedMulti: false
            },            
            callback: {
                onCheck: zTreeOnCheck
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        //同步初始化数据
        var treeData = $.parseJSON($("#treeData").val());
        $.fn.zTree.init($("#foreignKeyZtree"), setting, treeData);                      

        initData();

        fuzzySearch('foreignKeyZtree', '#txtSearch', false, true); //初始化模糊搜索方法

        //确定
        $(".sureBtn").click(function () {

            setAllCheckedData();

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });

     //ztreecheck 回调函数
    function zTreeOnCheck(event, treeId, treeNode) {

        //console.log(treeNode.id + " - " + treeNode.name);
        if (treeNode.checked && !treeNode.checkedOld) {
            checkParentNodeRecurse(treeId, treeNode);

            checkChildNodesRecurse(treeId, treeNode);
        } 
    }

    //递归勾选父级节点
    function checkParentNodeRecurse(treeId, treeNode) {

        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        treeObj.checkNode(treeNode, true, false, false);
        if (treeNode.isHidden) {
            treeNode.checked = true;
        }

        if (treeNode.parentTId != null) {
            checkParentNodeRecurse(treeId, treeNode.getParentNode());
        }

    }
    //递归勾选子级节点
    function checkChildNodesRecurse(treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);

        if (treeNode.children.length != 0); {
            for (var i = 0; i < treeNode.children.length; i++) {
                var itemNode = treeNode.children[i];
                treeObj.checkNode(itemNode, true, true, false);

                if (itemNode.isHidden) {
                    treeNode.checked = true;
                }

                if (itemNode.children)
                    checkChildNodesRecurse(treeId, itemNode);
            }
        }
    }

    //api：当前打开窗口实例，winOpener:父窗口对象
    var winOpener = parent.$("iframe[src*='CustomLibraryManage']")[0].contentWindow;//这里应该注意大小写的区分

    //初始化ztree选中状态
    function initData() {

        var treeObj = $.fn.zTree.getZTreeObj("foreignKeyZtree");

        var propetory = getParam("property");
        var parentTxtUl = winOpener.$("div[property=" + propetory + "]").first();

        if (parentTxtUl.children().length == 0) {
            return;
        }
        var hidReturnObjVal = parentTxtUl.find("input[type='hidden']").first().val();

        if (hidReturnObjVal.length > 0) {
            var oldVals = hidReturnObjVal.split(',');

            if (oldVals != undefined && oldVals.length > 0) {

                var rootNodes = treeObj.getNodes();//只能获取根节点的集合

                var allNodes = treeObj.transformToArray(rootNodes);//需要被转换的 zTree 节点数据对象集合

                $.each(oldVals, function (k, oldValue) {

                    $.each(allNodes, function (i, node) {

                        if (node.id == oldValue) {
                            treeObj.checkNode(node, true, false, false);
                        }
                    });

                });
            }
        }

        //默认展开所有节点
        treeObj.expandAll(true);
    }       

    //同步方式一次设置值
    function setAllCheckedData() {
        var treeObj = $.fn.zTree.getZTreeObj("foreignKeyZtree");
        var allCheckedNodes = treeObj.getCheckedNodes();

        var propetory = getParam("property");
        var parentTxtUl = winOpener.$("div[property=" + propetory + "]").first();

        var idList = [];
        var nameList = [];

        $.each(allCheckedNodes, function (i, node) {
            idList.push(node.id);
            nameList.push(node.name);

        });

        parentTxtUl.find("input[type='hidden']").first().val(idList.join());
        parentTxtUl.find("input[type='text']").first().val(nameList.join());
    }`

wjfang90 commented 2 years ago

已解决 var allCheckedNodes = treeObj.getNodesByFilter(function (node) { return node.checked; });//可以获取隐藏节点的checked值

参考注意事项 1.节点隐藏后，该节点的勾选状态将全部无效，并且不会再影响父节点的半勾选状态 2.getCheckedNodes () 方法不获取被隐藏的节点 3.getNodeByParam () /getNodesByParam () /getNodesByParamFuzzy () /getNodesByParamFilter () 这几个方法在遍历时仍然会遍历被隐藏的节点，请自行根据需求处理过滤规则 https://my.oschina.net/dyhunter/blog/5524491

zTree / zTree_v3

隐藏节点如何实现上下级关联 #507