I am working or tree table to show drilldown type or tree type structure. I have json with me and want to populate that to a tree table
But here I am getting error as TypeError: $(...).jstree is not a function
Am I missing any plugin or anything? From my side I have included all the plugins but same error I am getting.
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>
<div id="jstree"></div>I have edited my snippet; it is almost working fine but it is not showing columns like I have in my json outlet,noofbills,amount.
You need to include jstreegrid.min.js.
Following tag need to add in your code and it will work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstreegrid/3.9.5/jstreegrid.min.js"></script>
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>