JSTree在开放节点上的渐进加载

Question

我正试图使用JSTree逐步加载一棵节点树--目前，我有一个根节点，它基于某个路径，具有完整的数据，子节点具有它们的名称和路径。当用户打开节点时，我需要更改它们中的数据(加载完整数据)。这意味着我的JSON最初看起来如下所示：

{
"data":"Parent",
"attr":{"id:":"103.510.1.4556314","name:":"Parent"},
"children":[{
    "data":"Child_1",
    "attr":{"name":"Child_1","path":"/my/path/Child1"},
    "children":[]
        },
        "data":"Child_2",
    "attr":{"name":"Child_2","path":"/my/path/Child2"},
    "children":[]
        }]
} 

在打开Child_2时，应该再次从源加载该节点的全部数据。之后，它应该看起来如下所示：

{
"data":"Parent",
"attr":{"id:":"103.510.1.4556314","name:":"Parent"},
"children":[{
    "data":"Child_1",
    "attr":{"name":"Child_1","path":"/my/path/Child1"},
    "children":[]
        },
        "data":"Child_2",
    "attr":{"name":"Child_2","id":"103.510.1.4523317"},
    "children":[{
        "data":"GrandChild_1",
        "attr":{"name":"Child_1","path":"/my/path/Child2/GrandChild1"},
            "children":[]
            },
            "data":"GrandChild_2",
        "attr":{"name":"Child_2","path":"/my/path/Child2/GrandChild2"},
        "children":[]
            }]
        }]
}

我怎样才能实现这个功能？

这是我的Ajax调用：

function getJSONData(key) {

    var test;
    $.ajax({
        async: false,
        type: "GET",
        url: "/services/jstree?key=" + key,
        dataType: "json",

        success: function (json) {
            test = json;
        },

        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
            test = "error";
        }
    });
    return test;
}

它在创建树时使用：

$(".tree-search").click(function () {
    var jsonData = getJSONData($(this).attr("path"));
    treeContainer = $(this).siblings('.tree-container');
    treeContent = treeContainer.children('.tree-content');
    treeContent.jstree({
        "json_data": {"data": jsonData},
        "plugins": ["themes", "json_data", "ui", "checkbox"]
    });
});

谢谢你的建议！

Answer 1

我设法让它做我所需要的这个绑定：

.bind("open_node.jstree", function (event, data) {
                children = data.inst._get_children(data.rslt.obj);
                for(var i=0; i<children.length; i++){
                    data.inst.create_node(data.rslt.obj, "inside", getJSONData(children[i].getAttribute('path')));
                    data.inst.delete_node(children[i]);
                }
            });

但这看起来像是一次黑客攻击，而且可能会以一种更“干净”的方式做得更好。如果有人想出更好的答案，我很乐意重新分配正确的答案。谢谢!

Answer 2

首先，您从来没有，从来没有，从来没有使用async: false Ajax请求。此功能不存在。使用回调函数。

接下来，在使用JavaScript正确声明变量之前，不能使用var变量。忘记var会导致全局变量，几乎总是可以被归类为bug。

第三，您可能需要事件委托，因为您的子树元素是动态创建的，并且仍然应该对相同的事件做出反应。

// read jQuery docs on Deferred to find out about fail() and done() etc.
function getJSONData(key) {
    return $.get("/services/jstree", {key: key})
        .fail(function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + "\n" + thrownError);
        });
    });
}

// delegate "click" event handling to the document
$(document).on("click", ".tree-search", function () {
    var key = $(this).attr("path");

    getJSONData(key).done(function (jsonData) {
        // call jstree() with jsonData
    });
});