Rendered jsTree not reflecting "closed" states of JSON data nodes
I am creating a jsTree instance which shows a directory listing of a file server. I am having difficulties getting "sub-folder" or "sub-directory" nodes of a jsTree to display as open-able.
While the folder-node's JSON state
is closed
, the display of the jsTree does not show the open/close triangle for that node.
Here is the initial configuration of my #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" ]
});
The /services/listDirectoryContents.pl
script called from the ajax
subsection is a near-RESTful script that takes a path as a query argument (whatever is in the id
of the node).
The service outputs an array of directories and files in JSON format (at a maxdepth
of 1), along with display attributes for use by jsTree.
Here is sample output from this service, using /home/areynolds
as the root node:
$ ./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"
}
}
}
]
On my web page, the root node (e.g. /home/areynolds
) is initially closed — interestingly, despite the core
plug-in's initially_open
directive:
When I open the root node, I see a list of folders and files underneath the root node:
The correct icon
and title
data are shown for folders and files.
However, there are no open/close disclosure triangles next to each folder. (When opened, in theory, this would trigger an Ajax call for the list of folders and files of the opened sub-directo开发者_Go百科ry.)
How have I misconfigured in my JSON output or my initial $("#fileTree").jstree()
setup, such that the open/close triangles are prevented from showing up?
Thanks for your advice!
The location of the attr
attributes seems to make or break jsTree. Here is an example of a folder node that works properly:
[
...
{
"data" : {
"icon" : "/js/_demo/folder.png",
"title" : "workspace",
"attr" : {
"href" : "file:///home/areynolds/workspace"
}
},
"attr" : {
"rel" : "folder",
"id" : "/home/areynolds/workspace"
},
"state" : "closed"
}
...
]
精彩评论