Javascript 在打开的节点上渐进加载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":[]
        }]
} 

{
"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":[]
            }]
        }]
}

打开子节点时，应再次从源节点加载该节点的完整数据。之后，它应该如下所示：

{
"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":[]
        }]
} 

{
"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"]
    });
});

谢谢你的建议

首先，您从不使用

async:false

Ajax请求。此功能不存在。使用回调函数

接下来，如果不使用

var

正确声明JavaScript变量，就不能使用它们。忘记

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
    });
});

首先，您从不使用

async:false

Ajax请求。此功能不存在。使用回调函数

接下来，如果不使用

var

正确声明JavaScript变量，就不能使用它们。忘记

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
    });
});

首先，您从不使用

async:false

Ajax请求。此功能不存在。使用回调函数

接下来，如果不使用

var

正确声明JavaScript变量，就不能使用它们。忘记

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
    });
});

首先，您从不使用

async:false

Ajax请求。此功能不存在。使用回调函数

接下来，如果不使用

var

正确声明JavaScript变量，就不能使用它们。忘记

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
    });
});

---

我已经成功地使它实现了我需要的绑定：

.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]);
                }
            });

.bind（“open_node.jstree”，函数（事件、数据）{
children=data.inst.\u get\u children（data.rslt.obj）；
对于（var i=0；i我已经设法使它能够完成我需要的绑定：

.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]);
                }
            });

.bind（“open_node.jstree”，函数（事件、数据）{
children=data.inst.\u get\u children（data.rslt.obj）；
对于（var i=0；i我已经设法使它能够完成我需要的绑定：

.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]);
                }
            });

.bind（“open_node.jstree”，函数（事件、数据）{
children=data.inst.\u get\u children（data.rslt.obj）；
对于（var i=0；i我已经设法使它能够完成我需要的绑定：

.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]);
                }
            });

.bind（“open_node.jstree”，函数（事件、数据）{
children=data.inst.\u get\u children（data.rslt.obj）；
对于（var i=0；iYou可能希望为您当前拥有的内容设置一个JSFIDLE，包括HTML和模拟Ajax请求。@Tomalak我几乎拥有实现所需的代码，因此我可能会跳过该部分，并很快发布答案。不过，感谢您的关注！我有一些相关的评论，但并不完全是answer（因为如果没有看到更多的代码，这是不可能的）。无论如何。请看下面。您可能需要设置一个JSFIDLE，包括HTML和模拟Ajax请求，以满足您当前的需求。@Tomalak我几乎拥有了实现所需的代码，所以我可能会跳过它，并在短时间内发布答案。不过，感谢您的关注！我有几点相关的评论，但不足以说明问题完整答案（因为如果没有看到更多的代码，这是不可能的）。无论如何。请看下面。您可能需要设置一个JSFIDLE，包括HTML和模拟Ajax请求，以满足您当前的需求。@Tomalak我几乎拥有了实现所需的代码，所以我可能会跳过它，并在短时间内发布答案。不过，感谢您的关注！我有几点相关的评论，但不足以说明问题完整答案（因为如果没有看到更多的代码，这是不可能的）。无论如何。请看下面。您可能需要设置一个JSFIDLE，包括HTML和模拟Ajax请求，以满足您当前的需求。@Tomalak我几乎拥有了实现所需的代码，所以我可能会跳过它，并在短时间内发布答案。不过，感谢您的关注！我有几点相关的评论，但不足以说明问题完整答案（因为如果没有看到更多的代码，这是不可能的）。无论如何。请参见下文。感谢您提供的建议，我发现它非常有用。然而，儿童加载的代码不是我需要的，但这可能是我的错，没有足够清楚地说明我的问题。谢谢！感谢您提供的建议，我发现它非常有用。然而，儿童加载的代码不是我需要的，但这是我的错可能没有足够清楚地说明我的问题。谢谢！谢谢你提供的建议，我发现它非常有用。但是，儿童加载的代码不是我需要的，但可能是我没有足够清楚地说明我的问题。谢谢！谢谢你提供的建议，我发现它非常有用。但是，儿童加载的代码不是我需要的