渲染的 jsTree 不反映 JSON 数据节点的“关闭”状态答案

【问题标题】：Rendered jsTree not reflecting "closed" states of JSON data nodes渲染的 jsTree 不反映 JSON 数据节点的“关闭”状态
【发布时间】：2011-06-27 11:37:49
【问题描述】：

我正在创建一个显示文件服务器目录列表的 jsTree 实例。我很难让 jsTree 的“子文件夹”或“子目录”节点显示为可打开的。

虽然文件夹节点的 JSON state 是 closed，但 jsTree 的显示不显示该节点的打开/关闭三角形。

这里是我的#fileTree的初始配置：

$("#fileTree")
    .jstree({
        "core" : { 
            "initially_open" : [ "root" ] ,
            "html_titles" : false
        },

        "json_data" : {                
            "progressive_render" : true,                
            "data" : [
                {
                    "data" : { title : "/home/" + username },
                    "attr" : {
                        "id" : "/home/" + username,
                        "rel" : "root",
                        "href" : "file://home/" + username
                    },          
                    "icon" : "/js/_demo/home.png",
                    "state" : "closed"
                }   
            ],
            "ajax" : {
                "url" : "/services/listDirectoryContents.pl",
                "data" : function (n) { 
                    return { id : n.attr ? n.attr("id") : "/home/" + username }; 
                }
            }
        },

        "themes": {
            "theme": "default",
            "dots": true,
            "icons": true,
            "url": "/js/themes/default/style.css"
        },

        "plugins" : [ "core", "themes", "json_data" ]
    });

从ajax 子部分调用的/services/listDirectoryContents.pl 脚本是一个近乎RESTful 的脚本，它将路径作为查询参数（无论在节点的id 中是什么）。

该服务以 JSON 格式（maxdepth 为 1）输出一组目录和文件，以及 jsTree 使用的显示属性。

以下是此服务的示例输出，使用 /home/areynolds 作为根节点：

$ ./listDirectoryContents.pl /home/areynolds
Status: 200 OK
Content-Type: text/html; charset=ISO-8859-1

[
   {
      "data" : {
         "icon" : "/js/_demo/folder.png",
         "title" : "projects",
         "attr" : {
            "rel" : "folder",
            "href" : "file:///home/areynolds/projects",
            "id" : "/home/areynolds/projects"
         },
         "state" : "closed"
      }
   },
   {
      "data" : {
         "icon" : "/js/_demo/folder.png",
         "title" : "proj",
         "attr" : {
            "rel" : "folder",
            "href" : "file:///home/areynolds/proj",
            "id" : "/home/areynolds/proj"
         },
         "state" : "closed"
      }
   },

   ...

   {
      "data" : {
         "icon" : "/js/_demo/file.png",
         "title" : "test.bed",
         "attr" : {
            "rel" : "file",
            "href" : "file:///home/areynolds/test.bed"
         }
      }
   }
]

在我的网页上，根节点（例如 /home/areynolds）最初是关闭的——有趣的是，尽管有 core 插件的 initially_open 指令：

当我打开根节点时，我会看到根节点下的文件夹和文件列表：

为文件夹和文件显示正确的icon 和title 数据。

但是，每个文件夹旁边没有打开/关闭显示三角形。（理论上，当打开时，这将触发对打开的子目录的文件夹和文件列表的 Ajax 调用。）

我的 JSON 输出或初始 $("#fileTree").jstree() 设置中如何配置错误，以致无法显示开/关三角形？

感谢您的建议！

【问题讨论】：

标签： jquery ajax json metadata jstree

【解决方案1】：

attr 属性的位置似乎决定了 jsTree 的成败。下面是一个正常工作的文件夹节点示例：

[
...
   {
      "data" : {
         "icon" : "/js/_demo/folder.png",
         "title" : "workspace",
         "attr" : {
            "href" : "file:///home/areynolds/workspace"
         }
      },
      "attr" : {
         "rel" : "folder",
         "id" : "/home/areynolds/workspace"
      },
      "state" : "closed"
   }
...
]

【讨论】：