JsTree - загрузка подносов через ajax по запросу

Я пытаюсь получить jsTree, работая по требованию по загрузке подузлов. Мой код:

jQuery('#introspection_tree').jstree({ 
        "json_data" : {
            "ajax" : {
                url : "http://localhost/introspection/introspection/product"
            }
    },
    "plugins" : [ "themes", "json_data", "ui" ]
    });

Возвращенный из вызова json

[
  {
    "data": "Kit 1",
    "attr": {
      "id": "1"
    },
    "children": [
      [
        {
          "data": "Hardware",
          "attr": {
            "id": "2"
          },
          "children": [

          ]
        }
      ],
      [
        {
          "data": "Software",
          "attr": {
            "id": "3"
          },
          "children": [

          ]
        }
      ]
    ]
  }
  .....
]

У каждого элемента может быть много детей, дерево будет большим. В настоящее время это загружает сразу все дерево, что может занять некоторое время. Что мне нужно сделать для реализации по-запросу загрузки дочерних узлов при их открытии пользователем?

Спасибо заранее.

Ответ 1

Иришка указала мне в правильном направлении, но не полностью разрешила мою проблему. Я возился с ее ответом и придумал это. Использование двух разных функций сервера выполняется только для ясности. В первом списке перечислены все продукты верхнего уровня, во втором - все дочерние элементы данного продукта:

jQuery("#introspection_tree").jstree({
    "plugins" : ["themes", "json_data", "ui"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                var nodeId = "";
                var url = ""
                if (node == -1)
                {
                    url = "http://localhost/introspection/introspection/product/";
                }
                else
                {
                    nodeId = node.attr('id');
                    url = "http://localhost/introspection/introspection/children/" + nodeId;
                }

                return url;
            },
            "success": function (new_data) {
                return new_data;
            }
        }
    }
});

Данные json, возвращаемые из функций, похожи на это (обратите внимание на состояние = закрыто в каждом node):

[
  {
    "data": "Kit 1",
    "attr": {
      "id": "1"
    },
    "state": "closed"
  },
  {
    "data": "KPCM 049",
    "attr": {
      "id": "4"
    },
    "state": "closed"
  },
  {
    "data": "Linux BSP",
    "attr": {
      "id": "8"
    },
    "state": "closed"
  }
]

Никаких статических данных не требуется, дерево теперь полностью динамично на каждом уровне.

Ответ 2

Я думаю, было бы неплохо отобразить по умолчанию узлы первого уровня, после чего дети будут загружаться по требованию. В этом случае вам нужно только добавить "state" : "closed" к узлам, дочерние узлы которых будут загружаться по требованию.

Возможно, вы захотите отправить node id в ajax-вызов, чтобы изменить код

"json_data": {
    //root elements to be displayed by default on the first load
    "data": [
        {
            "data": 'Kit 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        },
        {
            "data": 'Another node of level 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        }
    ],
    "ajax": {
        url: "http://localhost/introspection/introspection/product",
        data: function (n) {
            return {
                "nodeid": $.trim(n.attr('id'))
            }
        }
    }
}

Из jsTree документация

Примечание: Если установлены оба данных и ajax, исходное дерево отображается из строки данных. При открытии закрытого node (у которого нет загруженных детей) выполняется запрос AJAX.

Ответ 3

вам нужно установить корневые элементы в виде древовидных данных на загрузку страницы, а затем вы сможете восстановить их детей с помощью запроса ajax

$("#introspection_tree").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "json_data": {
        //root elements
        "data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) {
                var nodeId = node.attr('id'); //id="kit1"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}]
                return new_data;
            }
        }
    }
});

См. мой ответ на аналогичный вопрос здесь (старая часть) для более подробной информации

Ответ 4

Я потратил часы на эту проблему. Наконец, я получил это так:

$("#resourceTree").jstree({
    "types": {
      "default": {
        "icon": "fa fa-folder-open treeFolderIcon",
      }
    },
    "plugins": ["json_data", "types", "wholerow", "search"],
    "core": {
      "multiple": false,
      "data": {
        "url" : function(node){
          var url = "rootTree.json";
          if(node.id === "specialChildSubTree")
            url = "specialChildSubTree.json";
          return url;
        },
        "data" : function(node){
          return {"id" : node.id};
        }
      }
    },
  });

rootTree.json:

[
  {
    "text": "Opened root folder",
    "state": {
      "opened": true
    },
    "children": [
      {
        "id" : "specialChildSubTree",
        "state": "closed",
        "children":true
      }
    ]
  }
]

specialChildSubTree.json:

[
  "Child 1",
  {
    "text": "Child 2",
    "children": [
      "One more"
    ]
  }
]

Итак, я отмечаю node, который стал родителем загруженного поддерева ajax с id, я смотрю в конфигурации ядра.

Примечание: Что node должен иметь "состояние": "закрытый" параметр, и он должен иметь параметр "children": true.

Я использую jsTree.js в версии 3.3.3