I am using jstree to create a treeview of the locations, rooms, and then assets for a company in a PHP app I am writing.
the purpose of this tree is to allow the user to select an asset during a booking wizard which creates a callout job for the particular asset.
I have the following setup on the page:-
HTML:
<div class="panel panel-primary" style="overflow:auto;" id="assetSelectContainer">
<div class="panel-body">
<div id="assetInfo" style="float:right;height:400px;width:45%;">
<div class="panel panel-default" style="margin:10px;overflow:visible;">
<div class="panel-heading" style="padding-top:20px;">
<h4 id="assetname"></h4>
</div>
<div class="panel-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Asset Location: <span id="locationname"></span></li>
<li class="list-group-item">Asset Room: <span id="locationroom"></span></li>
<li class="list-group-item">Asset Make: <span id="assetmake"></span></li>
<li class="list-group-item">Asset Model: <span id="assetmodel"></span></li>
<li class="list-group-item">Asset Type: <span id="assettype"></span></li>
<li class="list-group-item">Asset Serial No.: <span id="assetserial"></span></li>
<li class="list-group-item">Asset Tag: <span id="assettag"></span>
</li>
</ul>
</div>
</div>
</div>
<div class="companyAssetTree" style="float:left;height:400px;width:45%;border:1px solid #ccc;">
</div>
</div>
</div>
Jquery from bookingwizard.js:
switch (curStep) {
case 1:
$("#roomContainer").hide();
$('#step3Container').hide();
var jsondata = $.get("../php/treeviewJSON.php");
var xdata = ''
//Load First Dropdown Data
$('#companyAssetTree').jstree({
"plugins": ["themes", "html_data", "ui", "cookie"],
'core': {
'check_callback': true,
'data': {
url: "../php/treeviewJSON.php"
}
}
});
break;
JSON Returned from server:
[{
"id": "string",
"parent": "#",
"text": "Head Office",
"icon": "fas fa-compass",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office"
}
},
{
"id": "string",
"parent": "#",
"text": "Manchester",
"icon": "fas fa-compass",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Manchester"
}
},
{
"id": "string",
"parent": "#",
"text": "Birmingham",
"icon": "fas fa-compass",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Birmingham"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Server Room",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Server Room"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Office Block 1",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Office Block 1"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Office Block 2",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Office Block 2"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Marketing",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Marketing"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Sales",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Sales"
}
},
{
"id": "string",
"parent": "Head Office",
"text": "Customer Service",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Customer Service"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Accounts",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Accounts"
}
}, {
"id": "string",
"parent": "Head Office",
"text": "Human Resources",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Head Office",
"room": "Human Resources"
}
}, {
"id": "string",
"parent": "Manchester",
"text": "Sales",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Manchester",
"room": "Sales"
}
}, {
"id": "string",
"parent": "Manchester",
"text": "Server Room",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Manchester",
"room": "Server Room"
}
}, {
"id": "string",
"parent": "Manchester",
"text": "Reception",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Manchester",
"room": "Reception"
}
}, {
"id": "string",
"parent": "Manchester",
"text": "Office Block 1",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Manchester",
"room": "Office Block 1"
}
}, {
"id": "string",
"parent": "Birmingham",
"text": "Sales",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Birmingham",
"room": "Sales"
}
}, {
"id": "string",
"parent": "Birmingham",
"text": "Office Block 1",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Birmingham",
"room": "Office Block 1"
}
}, {
"id": "string",
"parent": "Birmingham",
"text": "Reception",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Birmingham",
"room": "Reception"
}
}, {
"id": "string",
"parent": "Birmingham",
"text": "Server Room",
"icon": "fas fa-city",
"li_attr": {
"locationname": "",
"room": "",
"assetid": 0,
"assetSerialNo": "",
"assetTag": ""
},
"li_atrr": {
"locationname": "Birmingham",
"room": "Server Room"
}
}
I have followed the documentation from the jstree website and I'm not sure what I am doing wrong here, I followed their structure for the alternate JSON Format:
// Alternative format of the node (id & parent are required)
{
id: "string" // required
parent: "string" // required
text: "string" // node text
icon: "string" // string for custom
state: {
opened: boolean // is the node open
disabled: boolean // is the node disabled
selected: boolean // is the node selected
},
li_attr: {} // attributes for the generated LI node
a_attr: {} // attributes for the generated A node
}
and the tree isn't even building from the JSON returned from the server.
I really hope someone can point out where I may be going wrong, thank you in advance :)
The way I re-approached this issue was to create the HTML for the treeView from serverside and then load that into the element's HTML, after doing that I then called on the treeView
$('#companyAssetTree').jstree();
As the html structure was all there already the tree created from that, saving me the headache of trying to rectify a massive amount of JSON Data.