Javascript: нужна помощь в написании дерева (из JSON или из списка вложенных классов) - PullRequest
Новая
       8

Javascript: нужна помощь в написании дерева (из JSON или из списка вложенных классов)

0 голосов
/ 30 марта 2020

Я пытаюсь создать Treeview, чтобы включить / отключить узлы. Я пишу плагин для приложения, написанного на js, и, поскольку я никогда не использовал js или какой-либо другой язык веб-разработки, я пытаюсь выяснить это как I go. У меня есть вложенный набор классов, которые я загружаю из файла JSON. Структура выглядит следующим образом: 

{
"name": "TopLevel",
"subLists": 
[
   {
      "id": "A1",
      "enabled": true
      subLists: 
      [
         {
            "id:"A1.1",
            "enabled" : false,
            "subLists": []
         },
         {
            "id" : "A1.2",
            "enabled" : true,
            "sublists" : []
         }
      ]
   }
]
}

Импортированный файл JSON настраивается пользователем и может иметь произвольное количество вложенных подсписков. Я бы хотел, чтобы пользователь мог просматривать их в виде дерева и переключать атрибут «enabled» каждого из них.

Когда я смотрю учебник по дереву на w3schools , они показывают, как создать жестко закодированный список, а не заполненный из массива или импортированный из внешнего JSON файла. Я также обнаружил ресурс jsTree , который, кажется, способен заполнять деревья из данных JSON, но, похоже, требуется JSON для получения с сервера, и мои файлы JSON все местный.

В идеале я хотел бы создать древовидное представление, которое указывает на класс TopLevel моего скрипта в памяти, а не непосредственно на файл JSON, чтобы избежать необходимости перезагружать JSON каждый раз, когда пользователь включает / отключает филиал. Может кто-нибудь указать мне ресурс для обучения, как это сделать?

1 Ответ

0 голосов
/ 30 марта 2020

замечательно, что вы изучаете js на практике, и это очень хорошее упражнение. Я могу показать вам, как сделать это в чистом JS без jsTree, так как я считаю, что лучше научиться делать такие вещи в чистом JS.

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

Вот пример, который я придумал. (Я немного изменил ввод JSON - исправил опечатку и переименовал «name» в «id» в узле topLevel.) 

const DATA = {
"id": "TopLevel",
"subLists": 
[
   {
      "id": "A1",
      "enabled": true,
      "subLists" : 
      [
         {
            "id":"A1.1",
            "enabled" : false,
            "subLists": [
              {
                "id": "A1.2",
                "enabled": false,
                "subLists": []
              }
            ]
         },
         {
            "id" : "A1.2",
            "enabled" : true,
            "subLists" : []
         }
      ]
   }
]
};

function renderNode(node, target) {
  const li = document.createElement('li');
  li.innerHTML = node.id;
  target.append(li);
  if(node.subLists && node.subLists.length) {
    const ul = document.createElement('ul');
    li.append(ul)
    node.subLists.forEach( (subList) => {
      renderNode(subList, ul);
    } );
  }
}


const root = document.getElementById('root');

renderNode(DATA, root);
<ul id="root">
</ul>

Теперь о свойстве «enabled». Я думаю, что вы хотите, чтобы ветви складывались или разворачивались на основе этого. Вы можете добиться этого, повторно используя код из w3schools, который вы связали. Отдельный скрипт может обрабатывать складывание и развертывание ветвей.

Надеюсь, это поможет;)

...