Я часто сталкиваюсь с проблемами со структурами деревьев, такими как отображение структур каталогов.
В большинстве случаев фон возвращает такие данные следующим образом:
[{id: 19, pid: 0, name: 'nodejs'}, {id: 20, pid: 19, name: 'express'}, {id: 21, pid: 19, имя: 'mongodb'}, {id: 60, pid: 20, имя: 'ejs'}, {id: 59, pid: 0, name: 'front-name. 59, имя: 'javascript'}, {id: 71, pid: 59, name: 'css'}, {id: 72, pid: 59, имя: 'html'}, {id: 73, pid: 59, имя: 'bootstrap'}, {id: 61, pid: 0, name: 'visuest' {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: {id: 61, pid: {id: 6, {id: 6, {id: 6, id: Имя: 'Web Design'},]Эта структура данных легко обрабатывать в фоновом режиме, но стойка регистрации трудно обработать. Вам нужно сначала преобразовать его в данные дерева JSON, следующим образом:
[{id: 19, pid: 0, имя: 'nodejs', дети: [{id: 20, pid: 19, name: 'express', дети: [{id: 60, pid: 20, имя: 'ejs'}]}, {id: 21, pid: 19, имя: 'mongodb'}], {id: 59, pid: ', name:', name: ', name:', name: ', name:', name: ', name:', pid: {id: 70, pid: 59, имя: 'javascript'}, {id: 71, pid: 59, name: 'css'}, {id: 72, pid: 59, имя: 'html'}, {id: 73, pid: 59, имя: 'bootstrap'}]}, {id: ': Дизайн ', дети: [{id: 63, pid: 61, имя:' веб -дизайн '}]},]Это очень удобно использовать рекурсивное использование для создания компонентов в форме дерева.
Лучше всего, если фон может непосредственно вернуть эту структуру, в противном случае стойка регистрации должна провести конверсию.
1. Преобразовать данные структуры массива списков в структуру дерева JSON
// Список к дереву jsonfunction listtotree (list, pid) {var ret = []; // временный массив для (var i in list) {if (list [i] .pid == pid) {// Если родительский идентификатор текущего элемента равен родительскому идентификатору, списка [i]. ret.push (list [i]); // Сохранить текущий элемент во временном массиве}} return ret; // Возврат результата после рекурсии превышает} var tree = listtotree (list, 0); // вызовать функцию, пройти в массив списков, чтобы быть преобразованным, и pidconsole.log (tree);2. Сгенерировать раскрывающиеся ящики на основе данных дерева JSON
// Добавить контейнер раскрывающегося поля на веб-странице <select id = "selectbox" name = ""> </select> // JS-скрипт, рекурсивно генерировать // Получить объект контейнера selectbox = document.getelementbyid ("selectbox"); // раскрывающееся меню дерева var j = "-"; // Символы префикса используются для отображения отношений между родителями-чильдом. Другие символы могут использоваться здесь функция CreateSelecttree (d) {var option = ""; for (var i = 0; i <d.length; i ++) {if (d [i] .children.length) {// Если есть опция подмножества+= "<vitue value = '"+d [i] .id+"'>"+j+d [i] .name+"</option>"; j+= "-"; // Добавить символ параметра символа префикса+= createSelecttree (d [i] .children); // Рекурсивно вызово-подмножество j = j.slice (0, j.length-1); // каждый раз, когда рекурсивный конец возвращается в превосходство, опция Prefix должен быть подключен к одному символу} {// Не отображается вариант. value = '"+d [i] .id+"'> "+j+d [i] .name+" </option> "; }} return option; // возвращать окончательный результат HTML} // Вызов функции и ввести и выходить из структуры в контейнер раскрывающегося окна SelectBox.innerHtml = createSelecttree (tree);Если вы все еще хотите учиться в глубине, вы можете нажать на резюме эффекта раскрывающейся коробки JQUERY и резюме эффекта раскрывающегося бокса JavaScript для изучения.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.