Таблица дерева jQuery с данными JSON

Я работаю над древовидной таблицей, мне нужно создать древовидную таблицу из данных JSON, я выполнил поиск в Google и обнаружил, что jQuery Treetable имеет эту функцию, поэтому я создал json из своей серверной части. Теперь я столкнулся с проблемой, как отобразить их в таблице дерева jQuery, так как у меня очень базовые знания JavaScript.

JSON

[{"data":{"totalAmount":"1638852","itemcode":"11086"},"children":[{"data":{"totalAmount":"1146570","itemcode":"8053"},"children":[{"data":{"totalAmount":"518212","itemcode":"3861"},"children":[{"data":{"totalAmount":"135116","itemcode":"390"},"text":"South Indian-1-Flr"},{"data":{"totalAmount":"133350","itemcode":"181"},"text":"South Indian-2-Flr"},{"data":{"totalAmount":"89092","itemcode":"859"},"text":"Take-away counter 1"},{"data":{"totalAmount":"61661","itemcode":"1889"},"text":"Coffee Counter"},{"data":{"totalAmount":"80568","itemcode":"449"},"text":"Trade Pos1"},{"data":{"totalAmount":"18425","itemcode":"93"},"text":"Trade Pos 2"}],"text":"2018-08-04"},{"data":{"totalAmount":"628358","itemcode":"4192"},"children":[{"data":{"totalAmount":"149692","itemcode":"370"},"text":"South Indian-1-Flr"},{"data":{"totalAmount":"165440","itemcode":"194"},"text":"South Indian-2-Flr"},{"data":{"totalAmount":"127689","itemcode":"1043"},"text":"Take-away counter 1"},{"data":{"totalAmount":"67865","itemcode":"1926"},"text":"Coffee Counter"},{"data":{"totalAmount":"84965","itemcode":"480"},"text":"Trade Pos1"},{"data":{"totalAmount":"32707","itemcode":"179"},"text":"Trade Pos 2"}],"text":"2018-08-05"}],"text":"JAYANAGAR"},{"data":{"totalAmount":"220024","itemcode":"2212"},"children":[{"data":{"totalAmount":"104801","itemcode":"1067"},"children":[{"data":{"totalAmount":"64091","itemcode":"267"},"text":"Restaurant"},{"data":{"totalAmount":"16234","itemcode":"608"},"text":"Coffee Counter"},{"data":{"totalAmount":"6233","itemcode":"38"},"text":"Takeaway"},{"data":{"totalAmount":"18243","itemcode":"154"},"text":"Trade POS"}],"text":"2018-08-04"},{"data":{"totalAmount":"115223","itemcode":"1145"},"children":[{"data":{"totalAmount":"73066","itemcode":"270"},"text":"Restaurant"},{"data":{"totalAmount":"16472","itemcode":"671"},"text":"Coffee Counter"},{"data":{"totalAmount":"9651","itemcode":"48"},"text":"Takeaway"},{"data":{"totalAmount":"16034","itemcode":"156"},"text":"Trade POS"}],"text":"2018-08-05"}],"text":"MALLESHWARAM"},{"data":{"totalAmount":"272258","itemcode":"821"},"children":[{"data":{"totalAmount":"138151","itemcode":"395"},"children":[{"data":{"totalAmount":"136273","itemcode":"380"},"text":"Restaurant"},{"data":{"totalAmount":"1878","itemcode":"15"},"text":"Trade POS"}],"text":"2018-08-04"},{"data":{"totalAmount":"134107","itemcode":"426"},"children":[{"data":{"totalAmount":"131881","itemcode":"409"},"text":"Restaurant"},{"data":{"totalAmount":"2226","itemcode":"17"},"text":"Trade POS"}],"text":"2018-08-05"}],"text":"KOLAR"}],"text":""}]

Я создал этот JSON с конца Java.

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

Плагин древовидной таблицы я предоставил только один, который я знаю.

javascript jquery json treegrid treetable

13.12.2018 06:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 357

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

я использую jstree и jstreegrid

с вашим json я пробовал это, и он дает правильный результат

var data;
	data = [
	  {
	    "data": {
	      "totalAmount": "1394334",
	      "itemcode": "10598"
	    },
	    "children": [
	      {
	        "data": {
	          "totalAmount": "987579",
	          "itemcode": "7545"
	        },
	        "children": [
	          {
	            "data": {
	              "totalAmount": "476426",
	              "itemcode": "3747"
	            },
	            "children": [
	              {
	                "data": {
	                  "totalAmount": "49644",
	                  "itemcode": "29"
	                },
	                "text": "North Indian"
	              },
	              {
	                "data": {
	                  "totalAmount": "194495",
	                  "itemcode": "474"
	                },
	                "text": "South Indian-1-Flr"
	              },
	              {
	                "data": {
	                  "totalAmount": "80768",
	                  "itemcode": "842"
	                },
	                "text": "Take-away counter 1"
	              },
	              {
	                "data": {
	                  "totalAmount": "60878",
	                  "itemcode": "1918"
	                },
	                "text": "Coffee Counter"
	              },
	              {
	                "data": {
	                  "totalAmount": "81999",
	                  "itemcode": "434"
	                },
	                "text": "Trade Pos1"
	              },
	              {
	                "data": {
	                  "totalAmount": "8642",
	                  "itemcode": "50"
	                },
	                "text": "Trade Pos 2"
	              }
	            ],
	            "text": "2018-09-01"
	          },
	          {
	            "data": {
	              "totalAmount": "511153",
	              "itemcode": "3798"
	            },
	            "children": [
	              {
	                "data": {
	                  "totalAmount": "39",
	                  "itemcode": "1"
	                },
	                "text": "North Indian"
	              },
	              {
	                "data": {
	                  "totalAmount": "118647",
	                  "itemcode": "334"
	                },
	                "text": "South Indian-1-Flr"
	              },
	              {
	                "data": {
	                  "totalAmount": "119871",
	                  "itemcode": "137"
	                },
	                "text": "South Indian-2-Flr"
	              },
	              {
	                "data": {
	                  "totalAmount": "109527",
	                  "itemcode": "901"
	                },
	                "text": "Take-away counter 1"
	              },
	              {
	                "data": {
	                  "totalAmount": "64771",
	                  "itemcode": "1896"
	                },
	                "text": "Coffee Counter"
	              },
	              {
	                "data": {
	                  "totalAmount": "78037",
	                  "itemcode": "464"
	                },
	                "text": "Trade Pos1"
	              },
	              {
	                "data": {
	                  "totalAmount": "20261",
	                  "itemcode": "65"
	                },
	                "text": "Trade Pos 2"
	              }
	            ],
	            "text": "2018-09-02"
	          }
	        ],
	        "text": "JAYANAGAR"
	      },
	      {
	        "data": {
	          "totalAmount": "207845",
	          "itemcode": "2299"
	        },
	        "children": [
	          {
	            "data": {
	              "totalAmount": "92141",
	              "itemcode": "1066"
	            },
	            "children": [
	              {
	                "data": {
	                  "totalAmount": "53822",
	                  "itemcode": "242"
	                },
	                "text": "Restaurant"
	              },
	              {
	                "data": {
	                  "totalAmount": "15339",
	                  "itemcode": "660"
	                },
	                "text": "Coffee Counter"
	              },
	              {
	                "data": {
	                  "totalAmount": "7548",
	                  "itemcode": "33"
	                },
	                "text": "Takeaway"
	              },
	              {
	                "data": {
	                  "totalAmount": "15432",
	                  "itemcode": "131"
	                },
	                "text": "Trade POS"
	              }
	            ],
	            "text": "2018-09-01"
	          },
	          {
	            "data": {
	              "totalAmount": "115704",
	              "itemcode": "1233"
	            },
	            "children": [
	              {
	                "data": {
	                  "totalAmount": "69946",
	                  "itemcode": "278"
	                },
	                "text": "Restaurant"
	              },
	              {
	                "data": {
	                  "totalAmount": "18197",
	                  "itemcode": "743"
	                },
	                "text": "Coffee Counter"
	              },
	              {
	                "data": {
	                  "totalAmount": "8741",
	                  "itemcode": "42"
	                },
	                "text": "Takeaway"
	              },
	              {
	                "data": {
	                  "totalAmount": "18820",
	                  "itemcode": "170"
	                },
	                "text": "Trade POS"
	              }
	            ],
	            "text": "2018-09-02"
	          }
	        ],
	        "text": "MALLESHWARAM"
	      },
	      {
	        "data": {
	          "totalAmount": "198910",
	          "itemcode": "754"
	        },
	        "children": [
	          {
	            "data": {
	              "totalAmount": "115313",
	              "itemcode": "397"
	            },
	            "children": [
	              {
	                "data": {
	                  "totalAmount": "107602",
	                  "itemcode": "355"
	                },
	                "text": "Restaurant"
	              },
	              {
	                "data": {
	                  "totalAmount": "7711",
	                  "itemcode": "42"
	                },
	                "text": "Trade POS"
	              }
	            ],
	            "text": "2018-09-01"
	          },
	          {
	            "data": {
	              "totalAmount": "83597",
	              "itemcode": "357"
	            },
	            "children": [
	              {
	                "data": {
	                  "totalAmount": "78537",
	                  "itemcode": "319"
	                },
	                "text": "Restaurant"
	              },
	              {
	                "data": {
	                  "totalAmount": "5060",
	                  "itemcode": "38"
	                },
	                "text": "Trade POS"
	              }
	            ],
	            "text": "2018-09-02"
	          }
	        ],
	        "text": "KOLAR"
	      }
	    ],
	    "text": ""
	  }
	]

	// load jstree
	$("#jstree").jstree({
	  plugins: ["grid","dnd","contextmenu","sort"],
	  core: {
	    data: data
	  },	
	  // configure tree table
	  grid: {
							    columns: [
							      {width: 'auto', header: "Outlet"},
							      
							      {width: 'auto', value: "itemcode", header: "NoOfBills", cellClass: "aright"},
							 
							      {width: 'auto', value: "totalAmount", header: "Amount", cellClass: "aright"}
							      
							    ],
	    resizable: true,
	    
	
	 
	  }
	});

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jstreegrid/3.9.5/jstreegrid.min.js"></script>
<div id = "jstree"></div>

13.12.2018 09:02

Другие вопросы по теме

Javascript при установленном флажке клонирует этот div, при снятом флажке удаляет этот div

Метод jQuery.fn.on () - необходимо передать this в качестве параметра функции

Bootstrap-datepicker, связанный с vue v-model, возвращается к предыдущим данным при потере фокуса

DatePicker всегда устанавливается в первую строку ASP.NET MVC

Назначьте новый класс для метки, когда область ввода имеет фокус

Как создать слайды презентации с 200-страничным HTML и CSS

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

Как обернуть символы в промежуток

Проверить входное значение с помощью jquery

Как исправить закрытие окна dailog jquery после открытия

Таблица дерева jQuery с данными JSON

Ответы 1

Другие вопросы по теме

Похожие вопросы