JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<div id='jqxTree'>
</div>
JavaScript
var source = builddata();
var data = [
{
"text": "Chocolate Beverage",
"id": "1",
"parentid": "-1"
}, {
"id": "2",
"parentid": "1",
"text": "Hot Chocolate",
"checked":"true"
}, {
"id": "3",
"parentid": "1",
"text": "Peppermint Hot Chocolate"
"checked":"true"
}, {
"id": "4",
"parentid": "1",
"text": "Salted Caramel Hot Chocolate"
}, {
"id": "5",
"parentid": "1",
"text": "White Hot Chocolate"
}, {
"id": "6",
"text": "Espresso Beverage",
"parentid": "-1"
}, {
"id": "7",
"parentid": "6",
"text": "Caffe Americano"
}, {
"id": "8",
"text": "Caffe Latte",
"parentid": "6"
}, {
"id": "9",
"text": "Caffe Mocha",
"parentid": "6"
}, {
"id": "10",
"text": "Cappuccino",
"parentid": "6"
}, {
"id": "11",
"text": "Pumpkin Spice Latte",
"parentid": "6"
}, {
"id": "12",
"text": "Frappuccino",
"parentid": "-1"
}, {
"id": "13",
"text": "Caffe Vanilla Frappuccino",
"parentid": "12"
}, {
"id": "15",
"text": "450 calories",
"parentid": "13"
}, {
"id": "16",
"text": "16g fat",
"parentid": "13"
}, {
"id": "17",
"text": "13g protein",
"parentid": "13"
}, {
"id": "14",
"text": "Caffe Vanilla Frappuccino Light",
"parentid": "12"
}]
var builddata = function () {
var source = [];
var items = [];
// build hierarchical source.
for (i = 0; i < data.length; i++) {
var item = data[i];
var label = item["text"];
var parentid = item["parentid"];
var id = item["id"];
if (items[parentid]) {
var item = { parentid: parentid, label: label, item: item };
if (!items[parentid].items) {
items[parentid].items = [];
}
items[parentid].items[items[parentid].items.length] = item;
items[id] = item;
}
else {
items[id] = { parentid: parentid, label:...