以Ajax加载以编程方式扩展jstree中的节点 [英] Programatically expanding nodes in jstree with ajax load

问题描述

我有一棵用jstree制成的树，它在加载节点时会部分加载并通过json_data插件加载.这是代码的症结所在:

I have a tree made with jstree which loads partially and loads on via json_data plugin as you expand nodes. Here's the crux of the code:

$("#TreeViewDiv")   
.jstree(
{
    json_data:
    {
        ajax:
        {
            url: "/Website/GetNodes",
            data: function (node) {
                //do some stuff to compile data for backend here

                return {
                    //insert data for backend here
                };
            },
            error: function () {
                $("#TreeViewDiv").html("Error initializing tree");
            }
        }
    },

    plugins: ["json_data", "ui"]
});

然后，我想扩展某些节点并选择一个叶节点，具体取决于哪个用户正在访问该站点.我按如下所示循环进行此操作:

I then want to expand some of the nodes and select a leaf node, depending on which user is accessing the site. I do this in a loop as follows:

var nodeValues = [Parent, firstChild, leaf];

        for (var j = 0; j < nodeValues .length-1; j++) {        
            $("#TreeViewDiv").jstree("open_node", $("input[value='" + nodeValues [j] + "']"));
        }

打开父节点工作正常，并且在显示树但未打开firstChild节点的情况下暴露firstChild.如果我再次开始循环，第一个孩子将成功打开以显示叶子节点.

Opening the Parent node works fine and the firstChild is exposed when the tree is shown but the firstChild node is not open. If I kick off the loop again, the firstchild opens successfully to show the leaf node.

我的猜测是，上述循环尝试打开请求时，请求尚未完成，并且firstChild树节点不存在.有没有办法在尝试打开下一个节点之前等待节点加载?谢谢！

My guess is that the request hasn't completed and the firstChild tree node doesn't exist when the above loop tries to open it. Is there a way to wait for the nodes to load before trying to open the next node? Thank you!

推荐答案

好的，所以我最终弄清楚了.这是处理延迟的一种方法.可能有一种更整洁的方法，但是玩了一天之后我的头很痛，因此重构将不得不等待:)

Ok, so I figured it out eventually. Here's a way to do it with deferreds. There's probably a neater way but my head hurts after a day of playing with this so refactoring will have to wait :)

var deffereds = $.Deferred(function (def) { def.resolve(); });

var nodeValues = [Parent, firstChild, leaf];

for (var j = 0; j < nodeValues .length-1; j++) {  
deffereds = (function(name, deferreds) {
                return deferreds.pipe(function () {
                    return $.Deferred(function(def) {
                                                    $("#TreeViewDiv").jstree("open_node", $("input[value='" + name + "']"), function () {
                            def.resolve();
                        });
                    });
                });
            })(nodeValues [j], deffereds);      
 }

这基本上将对open_node的调用置于延迟状态，并使用来自open_node函数的回调来解决该延迟问题，从而确保在打开其父节点之前没有打开任何节点.

This basically places the call to open_node in a deferred and uses the callback from the open_node functions to resolve the deferred thus ensuring that no node is opened before its parent has been opened.

这篇关于以Ajax加载以编程方式扩展jstree中的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！