Как представить структуру JSON в виде организационного дерева в HTML? - PullRequest
Новая
       6

Как представить структуру JSON в виде организационного дерева в HTML?

0 голосов
/ 03 июля 2019

У меня есть вложенный объект json, который представляет отношение один ко многим между родительским узлом и его дочерними элементами.Я хочу представить этот JSON в виде организационной структуры в HTML.Я обнаружил, что могу использовать Google Charts для этого, но я не уверен, что Google Charts дают вам возможность создавать коробки или вносить какие-либо изменения в дизайн.

Кто-нибудь знает какие-либо ресурсы, которые я могу изучить?

Это объект json, который я построил: 

{ 'id': 1,
  'name': 'Parent Node',
  'description': 'First Parent Node',
  'children': [
  {
      'id': 2,
      'name': 'child1',
      'description': 'child1',
      'children': [
      {
          'id': 4,
          'name': 'grand1',
          'description': 'grand1',
          'children': []
       }]
   },
   {
       'id': 3,
       'name': 'child2',
       'description': 'child2',
       'children': []
   }]
 }

Этот вопрос Представление двоичной древовидной структуры в веб-браузере также похоже, но ссылка, похоже, неработа.

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Я не уверен, насколько точно вы хотите, чтобы ваш дисплей был похож, поэтому вот два жизнеспособных ответа:

  • Вы просто хотите иерархию: просто рекурсивно просматривайте свойJSON и создайте теги ul и li , затем добавьте CSS для улучшения (вы можете найти что-то специально для вашей потребности в Codepen.io) или воспользуйтесь ссылкой из другого поста, который вы нашли(http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html и http://experiments.wemakesites.net/css3-treeview.html)

  • Вы хотите, чтобы он отображался плавно, и не возражаете против использования внешней библиотеки: используйте что-то вроде: https://www.graphdracula.net/ или один из перечисленных здесь https://dzone.com/articles/top-5-javascript-libraries-to-create-an-org-chart.Вам нужно будет преобразовать ваши данные так, чтобы они соответствовали потребностям библиотеки, но обычно это стоит того.

0 голосов
/ 03 июля 2019

Вот рабочая версия ссылки на другой вопрос, который вы упомянули: http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

...