Рендеринг jsTree не отражает "закрытые" состояния узлов данных JSON - PullRequest
Новая
       29

Рендеринг jsTree не отражает "закрытые" состояния узлов данных JSON

1 голос
/ 07 февраля 2011

Я создаю экземпляр 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" ]
    });

Сценарий /services/listDirectoryContents.pl, вызываемый из подраздела ajax, является сценарием, близким к 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:

Closed root node

Когда я открываю корневой узел, я вижу список папок и файлов под корневым узлом:

Opened root node

Для папок и файлов отображаются правильные данные icon и title.

Однако рядом с каждой папкой нет раскрывающих / закрывающих треугольников раскрытия. (Теоретически, при открытии это вызовет Ajax-вызов для списка папок и файлов открытого подкаталога.)

Как я неправильно сконфигурировал в своем выводе JSON или моей начальной настройке $("#fileTree").jstree(), чтобы треугольники открытия / закрытия не появлялись?

Спасибо за ваш совет!

1 Ответ

0 голосов
/ 12 февраля 2011

Расположение атрибутов 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"
   }
...
]
...