1

Есть переменная в которой хранится очень много данных. Я пытаюсь организовать раскрывающийся список дерево. Пример приведен ниже. Не понимаю почему список не показывает все пункты полностью. А только некоторые..

window.onload = function() {
  docs.forEach(function(item, i, arr) {
    for (i = 0; i <= 21; i++) {
      var d = document.createElement("div");
      document.body.appendChild(d);
      d.id = "Node" + i;
      d.innerHTML = '<div class="TreeNodeText">' + arr[i].title + '</div><details><summary></summary><div id="Paragraph' + i + '"><div>';
      for (var a = 0; a < arr[i].children.length; a++) {
        document.getElementById("Paragraph" + i).innerHTML = '' + arr[i].children[i].title + '';
      }

    }
  });
}

const docs = [{
  title: '01-05 I. Живые животные; продукты животного происхождения (Группы 01-05)',
  children: [{
      title: '01 Живые животные',
      children: [{
          title: '0101 ... Лошади, ослы, мулы и лошаки живые',
          children: [{
              title: '0101 2 ... лошади '
            },
            {
              title: '0101 21 000 0 чистопородные племенные животные  '
            },
            {
              title: '0101 29 ... прочие  '
            },
            {
              title: '0101 30 000 0 ослы  '
            },
            {
              title: '0101 90 000 0 прочие  '
            }
          ]
        },

        {
          title: '0105 ... Домашняя птица живая, то есть куры домашние (Gallus domesticus), утки, гуси, индейки и цесарки',
          children: [{
              title: '0105 1 ... массой не более 185 г  '
            },
            {
              title: '0105 9 ... прочие '
            }
          ]
        },
        {
          title: '0106 ... Живые животные прочие',
          children: [{
              title: '0106 1 ... млекопитающие  '
            },
            {
              title: '0106 2 ... рептилии (включая змей и черепах)  '
            },
            {
              title: '0106 3 ... птицы  '
            },
            {
              title: '0106 4 ... насекомые  '
            },
            {
              title: '0106 9 ... прочие '
            }
          ]
        }
      ]
    },
    {
      title: '02 Мясо и пищевые мясные субпродукты',
      children: [{
          title: '0201 ... Мясо крупного рогатого скота, свежее или охлажденное',
          children: [{
              title: '0201 1 ... туши и полутуши  '
            },
            {
              title: '0201 2 ... прочие отруба, необваленные  '
            },
            {
              title: '0201 3 ... мясо обваленное  '
            }
          ]
        },

      ]
    },
    {
      title: '03 Рыба и ракообразные, моллюски и прочие водные беспозвоночные  ',
      children: [{
          title: '0301 ... Живая рыба',
          children: [{
              title: '0301 1 ... декоративная рыба  '
            },
            {
              title: '0301 9 ... живая рыба прочая  '
            }
          ]
        },

      ]
    },
    {
      title: '04 Молочная продукция; яйца птиц; мед натуральный; пищевые продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0401 ... Молоко и сливки, несгущенные и без добавления сахара или других подслащивающих веществ',
          children: [{
              title: '0401 1 ... с содержанием жира не более 1 мас.%  '
            },
            {
              title: '0401 2 ... с содержанием жира более 1 мас.%, но не более 6 мас.%  '
            },
            {
              title: '0401 4 ... с содержанием жира более 6 мас.%, но не более 10 мас.% '
            },
            {
              title: '0401 5 ... с содержанием жира более 10 мас.%  '
            }
          ]
        },

      ]
    },
    {
      title: '05 Продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0501 00 000 0 Человеческий волос, необработанный, мытый или немытый, очищенный или неочищенный; отходы человеческого волоса'
        },
        {
          title: '0502 ... Щетина свиная или кабанья; барсучий или прочий волос, используемый для производства щеточных изделий; их отходы',
          children: [{
              title: '0502 10 000 0 щетина свиная или кабанья и ее отходы '
            },
            {
              title: '0502 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0504 00 000 0 Кишки, пузыри и желудки животных (кроме рыбьих), целые и в кусках, свежие, охлажденные, замороженные, соленые, в рассоле, сушеные или копченые'
        },
        {
          title: '0505 ... Шкурки и прочие части птиц с перьями или пухом, перья и части перьев (с подрезанными или неподрезанными краями) и пух, очищенные, дезинфицированные или обработанные для хранения, но не подвергнутые дальнейшей обработке; порошок и отходы перьев или их частей',
          children: [{
              title: '0505 1 ... перья птиц, используемые для набивки; пух  '
            },
            {
              title: '0505 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0506 ... Кости и роговой стержень, необработанные, обезжиренные, подвергнутые первичной обработке (без придания формы), обработанные кислотой или дежелатинизированные; порошок и отходы этих продуктов',
          children: [{
              title: '0506 10 000 0 оссеин и кости, обработанные кислотой '
            },
            {
              title: '0506 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0507 ... Слоновая кость, панцири черепах, ус китовый и щетина из китового уса, рога, оленьи рога, копыта, ногти, когти и клювы, необработанные или подвергнутые первичной обработке, но без придания формы; порошок и отходы этих продуктов',
          children: [{
              title: '0507 10 000 0 слоновая кость; порошок и отходы  '
            },
            {
              title: '0507 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0508 00 000 0 Кораллы и аналогичные материалы, необработанные или подвергнутые первичной обработке; раковины и панцири моллюсков, ракообразных или иглокожих и скелетные пластины каракатиц, необработанные или подвергнутые первичной обработке, без придания формы, порошок и отходы этих продуктов'
        },
        {
          title: '0510 00 000 0 Амбра серая, струя бобровая, циветта и мускус; шпанки; желчь, в том числе сухая; железы и прочие продукты животного происхождения, используемые в производстве фармацевтических продуктов, свежие, охлажденные, мороженые или обработанные иным способом для кратковременного хранения'
        },
        {
          title: '0511 ... Продукты животного происхождения, в другом месте не поименованные или не включенные; павшие животные группы 01 или 03, непригодные для употребления в пищу',
          children: [{
              title: '0511 10 000 0 сперма бычья  '
            },
            {
              title: '0511 9 ... прочие '
            }
          ]
        }
      ]
    }
  ]
}, ]
.treeHTML {
  line-height: normal;
}

.treeHTML details {
  display: block;
}

.treeHTML div {
  position: relative;
  margin: 0 0 0 .5em;
  padding: 0 0 0 1.2em;
}

.treeHTML div:not(:last-child) {
  /* необязательно */
  border-left: 1px solid #ccc;
}

.treeHTML div:before {
  /* необязательно */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: .5em;
  border-bottom: 1px solid #ccc;
}

.treeHTML div:last-child:before {
  /* необязательно */
  border-left: 1px solid #ccc;
}

.treeHTML summary {
  /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.treeHTML details[open] summary {
  /* убрать рамку при фокусе */
  outline: none;
}

.TreeNodeText {
  position: relative;
  height: 100%;
  border: 1px solid #bbb;
  border-left: none;
  box-shadow: 0 2px 2px -2px;
  padding: 0 5px 0 10px;
  border-radius: 2px;
  min-width: 230px;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  font-weight: 700;
  border-left: 1px solid #bbb;
  padding-bottom: 5px;
  padding-top: 5px;
  margin-bottom: 10px;
}


/* details summary:before {
    content: url("../images/plus-in-circle.png");
    position: absolute;
    top: 3px;
    left: -5px;
}

details[open] summary:before {
    content: url("../images/minus-in-circle.png");
    content: "sad";
     position: absolute;
    top: 3px;
    left: -5px;
} */

1 ответ 1

2

window.onload = function() {
  addItems(docs, document.body);
}

function addItems(items, parent) {
  items && items.forEach((item) => {
    var d = document.createElement("div");
    d.innerHTML = '<div class="TreeNodeText">' + item.title + '</div>' + 
      ((item.children && item.children.length)? '<details><summary></summary><div class="paragraph"><div></details>' : '');

    addItems(item.children, d.querySelector(".paragraph"));
    parent.appendChild(d);
  });
}

const docs = [{
  title: '01-05 I. Живые животные; продукты животного происхождения (Группы 01-05)',
  children: [{
      title: '01 Живые животные',
      children: [{
          title: '0101 ... Лошади, ослы, мулы и лошаки живые',
          children: [{
              title: '0101 2 ... лошади '
            },
            {
              title: '0101 21 000 0 чистопородные племенные животные  '
            },
            {
              title: '0101 29 ... прочие  '
            },
            {
              title: '0101 30 000 0 ослы  '
            },
            {
              title: '0101 90 000 0 прочие  '
            }
          ]
        },

        {
          title: '0105 ... Домашняя птица живая, то есть куры домашние (Gallus domesticus), утки, гуси, индейки и цесарки',
          children: [{
              title: '0105 1 ... массой не более 185 г  '
            },
            {
              title: '0105 9 ... прочие '
            }
          ]
        },
        {
          title: '0106 ... Живые животные прочие',
          children: [{
              title: '0106 1 ... млекопитающие  '
            },
            {
              title: '0106 2 ... рептилии (включая змей и черепах)  '
            },
            {
              title: '0106 3 ... птицы  '
            },
            {
              title: '0106 4 ... насекомые  '
            },
            {
              title: '0106 9 ... прочие '
            }
          ]
        }
      ]
    },
    {
      title: '02 Мясо и пищевые мясные субпродукты',
      children: [{
          title: '0201 ... Мясо крупного рогатого скота, свежее или охлажденное',
          children: [{
              title: '0201 1 ... туши и полутуши  '
            },
            {
              title: '0201 2 ... прочие отруба, необваленные  '
            },
            {
              title: '0201 3 ... мясо обваленное  '
            }
          ]
        },

      ]
    },
    {
      title: '03 Рыба и ракообразные, моллюски и прочие водные беспозвоночные  ',
      children: [{
          title: '0301 ... Живая рыба',
          children: [{
              title: '0301 1 ... декоративная рыба  '
            },
            {
              title: '0301 9 ... живая рыба прочая  '
            }
          ]
        },

      ]
    },
    {
      title: '04 Молочная продукция; яйца птиц; мед натуральный; пищевые продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0401 ... Молоко и сливки, несгущенные и без добавления сахара или других подслащивающих веществ',
          children: [{
              title: '0401 1 ... с содержанием жира не более 1 мас.%  '
            },
            {
              title: '0401 2 ... с содержанием жира более 1 мас.%, но не более 6 мас.%  '
            },
            {
              title: '0401 4 ... с содержанием жира более 6 мас.%, но не более 10 мас.% '
            },
            {
              title: '0401 5 ... с содержанием жира более 10 мас.%  '
            }
          ]
        },

      ]
    },
    {
      title: '05 Продукты животного происхождения, в другом месте не поименованные или не включенные   ',
      children: [{
          title: '0501 00 000 0 Человеческий волос, необработанный, мытый или немытый, очищенный или неочищенный; отходы человеческого волоса'
        },
        {
          title: '0502 ... Щетина свиная или кабанья; барсучий или прочий волос, используемый для производства щеточных изделий; их отходы',
          children: [{
              title: '0502 10 000 0 щетина свиная или кабанья и ее отходы '
            },
            {
              title: '0502 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0504 00 000 0 Кишки, пузыри и желудки животных (кроме рыбьих), целые и в кусках, свежие, охлажденные, замороженные, соленые, в рассоле, сушеные или копченые'
        },
        {
          title: '0505 ... Шкурки и прочие части птиц с перьями или пухом, перья и части перьев (с подрезанными или неподрезанными краями) и пух, очищенные, дезинфицированные или обработанные для хранения, но не подвергнутые дальнейшей обработке; порошок и отходы перьев или их частей',
          children: [{
              title: '0505 1 ... перья птиц, используемые для набивки; пух  '
            },
            {
              title: '0505 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0506 ... Кости и роговой стержень, необработанные, обезжиренные, подвергнутые первичной обработке (без придания формы), обработанные кислотой или дежелатинизированные; порошок и отходы этих продуктов',
          children: [{
              title: '0506 10 000 0 оссеин и кости, обработанные кислотой '
            },
            {
              title: '0506 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0507 ... Слоновая кость, панцири черепах, ус китовый и щетина из китового уса, рога, оленьи рога, копыта, ногти, когти и клювы, необработанные или подвергнутые первичной обработке, но без придания формы; порошок и отходы этих продуктов',
          children: [{
              title: '0507 10 000 0 слоновая кость; порошок и отходы  '
            },
            {
              title: '0507 90 000 0 прочие  '
            }
          ]
        },
        {
          title: '0508 00 000 0 Кораллы и аналогичные материалы, необработанные или подвергнутые первичной обработке; раковины и панцири моллюсков, ракообразных или иглокожих и скелетные пластины каракатиц, необработанные или подвергнутые первичной обработке, без придания формы, порошок и отходы этих продуктов'
        },
        {
          title: '0510 00 000 0 Амбра серая, струя бобровая, циветта и мускус; шпанки; желчь, в том числе сухая; железы и прочие продукты животного происхождения, используемые в производстве фармацевтических продуктов, свежие, охлажденные, мороженые или обработанные иным способом для кратковременного хранения'
        },
        {
          title: '0511 ... Продукты животного происхождения, в другом месте не поименованные или не включенные; павшие животные группы 01 или 03, непригодные для употребления в пищу',
          children: [{
              title: '0511 10 000 0 сперма бычья  '
            },
            {
              title: '0511 9 ... прочие '
            }
          ]
        }
      ]
    }
  ]
}, ]
.paragraph {
  padding-left:10px;
}

1
  • Больше спасибо, разобрался! 23 янв 2019 в 17:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.