jsTree - загрузка подузлов через ajax по требованию - PullRequest
Новая
       14

jsTree - загрузка подузлов через ajax по требованию

31 голосов
/ 10 ноября 2011

Я пытаюсь заставить 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": [

          ]
        }
      ]
    ]
  }
  .....
]

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

Заранее спасибо.

Ответы [ 4 ]

43 голосов
/ 11 ноября 2011

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

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, возвращаемые функциями, выглядят следующим образом (обратите внимание, что состояние = закрыто в каждом узле): 

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

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

12 голосов
/ 11 ноября 2011

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

Возможно, вы захотите отправить идентификатор узла в вызове 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, исходное дерево отображается из строки данных.При открытии закрытого узла (у которого нет загруженных дочерних элементов) делается запрос AJAX.

10 голосов
/ 10 ноября 2011

вам нужно установить корневые элементы в виде древовидных данных при загрузке страницы, и тогда вы сможете получать их дочерние элементы с помощью запроса 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;
            }
        }
    }
});

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

2 голосов
/ 11 января 2017

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

$("#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"
    ]
  }
]

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

ПРИМЕЧАНИЕ. Этот узел должен иметь параметр «state»: «closed» и иметь параметр «children»": true.

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

...