jquery fancytree加载并检查所有子节点

Question

我正在使用fancytree插件来创建树视图。我的所有数据都通过ajax和json加载到扩展中。如果用户检查父节点，我也有代码加载子节点，因为如果不首先扩展该节点，它们在技术上不会加载。

我的问题是，如果你有3级深度的父子关系，并且扩展到2级，则不会检查第3级。

本质上我有类似的东西

Parent1
-->Child1
---->Child1-1
---->Child1-2
---->Child1-3
-->Child2

现在，如果您从未展开父项并进行检查，则会加载并检查所有节点。但是，如果展开父级1以显示子级1和2，则检查parent1子节点1-1到3永远不会加载或检查。这是我在检查时加载子节点的代码，我错过了什么。

select: function (event, data) { //here's where I need to load the children for that node, if it has them, so they can be set to checked


    var node = data.node;
                        //alert(node.key);
                        if (node.isSelected()) {
                            if (node.isUndefined()) {

                                // Load and select all child nodes
                                node.load().done(function () {
                                    node.visit(function (childNode) {

                                        childNode.setSelected(true);
                                    });
                                });
                            } else {
                                // Select all child nodes
                                node.visit(function (childNode) {

                                    childNode.setSelected(true);
                                });
                            }
                            // Get a list of all selected nodes, and convert to a key array:
                            var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {

                                treeHash[node.data.treeItemType + node.key] = node.key;
                            });

                        }

这是我的完整JS仅供参考

if ($("entityTree") != null) {
            $(function () {
                // Create the tree inside the <div id="tree"> element.
                $("#entityTree").fancytree({
                    source: { url: "/Home/GetTreeViewData", cache: true }
                    , checkbox: true
                    , icons: false
                    , cache: true
                    , lazyLoad: function (event, data) {
                        var node = data.node;
                        data.result = {
                            url: "/Home/GetTreeViewData/" + node.key.replace(node.data.idPrefix, "")
                            , data: { mode: "children", parent: node.key }
                            , cache: true
                        };
                    }
                    , renderNode: function (event, data) {
                        // Optionally tweak data.node.span
                        var node = data.node;

                        var $span = $(node.span);
                        if (node.key != "_statusNode") {

                            $span.find("> span.fancytree-expander").css({
                                borderLeft: node.data.customLeftBorder
                                //borderLeft: "1px solid orange"
                            });
                        }
                    }
                    , selectMode: 3
                    , select: function (event, data) { //here's where I need to load the children for that node, if it has them, so they can be set to checked
                        var node = data.node;
                        //alert(node.key);
                        if (node.isSelected()) {
                            if (node.isUndefined()) {

                                // Load and select all child nodes
                                node.load().done(function () {
                                    node.visit(function (childNode) {

                                        childNode.setSelected(true);
                                    });
                                });
                            } else {
                                // Select all child nodes
                                node.visit(function (childNode) {

                                    childNode.setSelected(true);
                                });
                            }
                            // Get a list of all selected nodes, and convert to a key array:
                            var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {

                                treeHash[node.data.treeItemType + node.key] = node.key;
                            });

                        }
                        else {
                            delete treeHash[node.data.treeItemType + node.key];
                            //alert("remove " + node.key);
                        }
                        for (var i in treeHash) {
                            alert(treeHash[i]);
                        }

                    }
                    , strings: {
                        loading: "Grabbing places and events…",
                        loadError: "Load error!"
                    },
                })
            });
        }

Answer 1

试试这个，让我知道是否有效。我们需要加载已经加载的子节点的未定义子节点。

       if (node.isSelected()) {
            if (node.isUndefined()) {

                // Load and select all child nodes
                node.load().done(function () {
                    node.visit(function (childNode) {

                        childNode.setSelected(true);
                    });
                });
            } else {
                // Select all child nodes
                node.visit(function (childNode) {

                    childNode.setSelected(true);
                    if (childNode.isUndefined()) {

                        // Load and select all child nodes
                        childNode.load().done(function () {
                            childNode.visit(function (itschildNode) {
                                itschildNode.setSelected(true);
                            });
                        });
                    }
                });
            }
        }