In this article I will explain with an example, how to populate
jsTree using API in HTML.
The API URL
The following JSON will be used in this article.
[
{
"id": "1",
"parent": "#",
"text": "Cars"
},
{
"id": "2",
"parent": "#",
"text": "Bikes"
},
{
"id": "1-1",
"parent": "1",
"text": "Alto"
},
{
"id": "1-2",
"parent": "1",
"text": "WagonR"
},
{
"id": "1-3",
"parent": "1",
"text": "Scorpio"
},
{
"id": "1-4",
"parent": "1",
"text": "Duster"
},
{
"id": "2-5",
"parent": "2",
"text": "Discover"
},
{
"id": "2-6",
"parent": "2",
"text": "Avenger"
},
{
"id": "2-7",
"parent": "2",
"text": "Unicorn"
},
{
"id": "2-8",
"parent": "2",
"text": "Karizma"
}
]
HTML Markup
The HTML Markup consists of following elements:
div – For generating the
jQuery TreeView.
HiddenField – For storing selected items.
Button – For displaying selected items.
<div id="jstree"></div>
<input type="hidden" id="selectedItems" />
<input type="button" value="Submit" id="btnSubmit" />
jQuery TreeView implementation
Inside the HTML, the following CSS script file is inherited.
1. style.min.css
And then, the following JS script files are inherited.
1. jquery.min.js
2. jstree.min.js
Inside the
jQuery document ready event handler, the API URL is called using the
jQuery get function.
Inside the
jQuery Success event handler, the
jQuery jsTree plugin is applied to the HTML DIV and the
JSON string returned form the API is converted to Array using the
JSON.parse function and assigned as source in the
data property.
changed.jstree
Inside the
changed event handler of the
jQuery jsTree plugin, an Array is declared.
Then, a FOR loop is executed over the selected (checked) items of
jsTree and inserted into the Array one by one.
Finally, the Array of
JSON objects is serialized and saved in the Hidden Field.
The Button has been assigned with a
jQuery click event handler.
Submitting the selected (checked) items
When the
Submit Button is clicked, the selected items of
jsTree set in the HiddenField will be displayed using
JavaScript Alert Message Box.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
$.get("https://raw.githubusercontent.com/aspsnippets/test/master/Vehicles.json",
function (data, status) {
$('#jstree').on('changed.jstree', function (e, data) {
var i, j;
var selectedItems = [];
for (i = 0, j = data.selected.length; i < j; i++) {
//Fetch the Id.
var id = data.selected[i];
//Remove the ParentId.
if (id.indexOf('-') != -1) {
id = id.split("-")[1];
}
//Add the Node to the JSON Array.
selectedItems.push({
text: data.instance.get_node(data.selected[i]).text,
id: id,
parent: data.selected[i].split("-")[0]
});
}
//Serialize the JSON Array and save in HiddenField.
$('#selectedItems').val(JSON.stringify(selectedItems));
}).jstree({
"core": {
"themes": { "variant": "large" },
"data": JSON.parse(data)
},
"checkbox": { "keep_selected_style": false },
"plugins": ["wholerow", "checkbox"]
});
});
});
$("#btnSubmit").click(function () {
alert($('#selectedItems').val());
});
</script>
Screenshot
![Populate jsTree using API in HTML]()
Demo
Downloads
