I am working on tree table, I have to make a tree table from JSON data, I have search on google and found jQuery Treetable has this feature, so I have created the json from my back end. Now I am facing issue on how to render them into jQuery tree table, as I have very basic knowledge of 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":""}]
I have created that JSON from Java end.
This is the link like what I want to create the tree table
The plugin of tree table, I have provided that only one I know.
i am using jstree and jstreegrid
with your json i tried this and it is giving right result
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>