如何消除无子节点的递归 AJAX 请求？

Question

问题：

根据作者的说法，jsTree 文档：

当打开一个关闭的节点（没有加载的子节点）时，会发出 AJAX 请求。

如何配置jsTree来摆脱对每个空/无子节点发出的这些AJAX数据请求？我希望我的空节点保持为空（或无子节点）！

---

给定（简化）：

JSON 数据容器 (data.json)

{
    "data" : "Root node with no children",
    "children" : []
}

jsTree 配置

{
    "json_data" : {
        "ajax" : {
            "url"        : "data.json",
            "type"       : "GET",
            "dataType"   : "json",
            "dataFilter" : function (data, type) {
                //some filtering function
            }
        }
    },
    "plugin" : ["json_data"]
}

---

Answer 1

将叶节点的状态标记为“leaf”。那应该解决它。

Answer 2

我在为 XML 树的无子节点设置属性 state="close" 时遇到了这个问题。删除状态属性可以解决该问题。

Answer 3

几周前我也遇到了类似的问题。我在“url”字段中进行了函数调用，最终生成了基于 SQL 查询生成 JSON 字符串的 java 代码。因此，当我单击一个无子节点的关闭节点时，该函数会再次被调用，从而产生一棵无尽的树。

我解决这个问题的方法是：

"json_data" : {
        "ajax" : {
            "url" : "getAreaTree?treeType=Areas&ownerPhone=<%=webSessionObject.getUserPhoneNum()%>",
            "data" : function (n) {
                    return { id : n.attr ? n.attr("id") : 0 };
                }
        }
    },

“data”中定义的函数的结果将作为参数添加到“url”函数中。然后我可以检查参数是否为 0（初始加载）或 1（我的 root 的 id）或其他值。

如果这对你不起作用，也许你可以尝试这样的事情：

.bind("before.jstree",function(event,data){
    if(data.func === "create"){
                  var foo = true;
        data.inst._get_node(null, true).each(function () {

            if(this.id!=rootId && this.id!=0){
                foo = false;    
        })
        if(!foo){
            event.stopImmediatePropagation();
            return false;
        }
    }       
})

不过我不太确定这是否有效。 “before.jstree”在所有事件之前触发。我正在检查即将触发的函数是否是“create”，如果是，我检查所选节点的 id。如果它不是我的 root id 或 0（初始加载），我将停止创建函数。

我在不同的情况下使用类似的结构，所以这样的东西应该有效。但“创建”事件可能不是您应该绑定的事件。您可以将其更改为

.bind("before.jstree",function(event,data){
            console.log(data.func)
    if(data.func === "create"){

查看调用了哪些函数。

Answer 4

只需跳过 Children 属性即可。显然你的节点没有子节点，但是你指定了属性？只需跳过它，该节点将被渲染为叶节点，并且不会发出进一步的请求。

Answer 5

我也一直在为这个问题苦苦挣扎。我从 jsTree - 通过 ajax 按需加载子节点得到了主要想法

基本问题是，当我们单击未设置为叶子的子节点时，会使用我们在树配置中设置的 URL 生成新的 AJAX 请求。上面链接中看到的技巧是提供一个函数而不是静态 URL 字符串。我的 jstree 用于显示服务器上的目录结构，因此我可以安排动态添加子目录的 URL。如果您将一个函数分配给 jstree 配置中 ajax 属性的 url 属性，该函数将接收您单击的节点作为参数。我的节点显示目录或文件的名称，因此我可以使用 text() 函数来获取原始目录名称。以这种方式返回的名称前面似乎有一些空格，因此我使用了 String trim() 函数，然后encodeURIComponent 为我提供了可以在 URL 中使用的内容。

如果 -1 传递给 url 函数，那么您就处于根目录，可以安全地使用您的基本 URL。现在，这仅适用于层次结构的第一级。我还有更多工作要做，添加节点元数据的完整路径或类似的东西，但这个想法可能会让您走上正确的轨道。看起来这并不完全是一个错误，而是设计使然。您必须确保子节点触发的请求向服务器发送合适的 URL。

下面是我在 jstree 配置中分配给 ajax 对象的 url 属性：

"url": function (node) {
    var subDirectory = "",
    url = "";
    if (node === -1)
    {
        url = "/tree_service/tree/format/json?path=exercises";
    }
    else
    {
        subDirectory = encodeURIComponent(node.text().trim());
        url = "/tree_service/tree/format/json?path=exercises/" + subDirectory;
    }
    return url;
}

我的计划是通过轮询节点的完整路径来累积构建 URL，然后添加如上所述的节点名称以创建最终 URL。伪代码：

//haven't figured out how to add the path to the node and then retrieve it
path = node.metadata.path;
path = encodeURIComponent(path);
subDirectory = encodeURIComponent(node.text().trim());
url = path + "/" + subDirectory;

更新
请参阅我的答案如何获取 jsTree 的元数据。 关于使用node.data().path从节点获取元数据