There are several simple ways of loading data into dhtmlxTree:
First, you need to prepare a data set that will be loaded into Tree.
dhtmlxTree expects loaded data in the JSON format. Here is an example of an appropriate data set:
var dataset = [
{
"value": "Books",
"id": "books",
"opened": true,
"items": [
{
"value": "History",
"id": "history",
"items": [{
"value": "John Mack Faragher",
"id": "jmf",
"icon": {
"folder": "fas fa-book",
"openFolder": "fas fa-book-open",
"file": "fas fa-file"
}
},
{
"value": "Jim Dwyer",
"id": "jd"
},
{
"value": "Larry Schweikart",
"id": "ls"
}]
},
{
"value": "Fiction & Fantasy",
"id": "fantasy",
"items": [{
"value": "Audrey Niffenegger",
"id": "af"
},
{
"value": "Philip Roth",
"id": "pr"
}]
},
{
"value": "Teens",
"id": "teens",
"items": [{
"value": "Joss Whedon",
"id": "jw"
},
{
"value": "Meg Cabot",
"id": "mc"
},
{
"value": "Garth Nix",
"id": "gn"
}]
}
]
}
];
Each object in the data set contains configuration of a tree item. The structure of an item is rather flexible. It may include:
value | (string) the name of an item |
id | (string) the id of an item |
opened | (boolean) optional, defines whether an item is opened by default |
checkbox | (boolean) optional, enables/disables displaying a checkbox for a tree item |
items | (array) an array of nested items |
icon | (object) allows adding custom icons for a tree item |
To load data from an external file, make use of the load method of Tree Collection. It takes the URL of the file with data as a parameter:
var tree = new dhx.Tree("tree_container");
tree.data.load("../common/dataset.json");
Related sample: Tree. Basic Initialization
The component will make an AJAX call and expect the remote URL to provide valid JSON data.
Data loading is asynchronous, so you need to wrap any after-loading code into a promise:
tree.data.load("/some/data").then(function(){
// some logic here
});
To load data from a local data source, use the parse method of Tree Collection. Pass a predefined data set as a parameter of this method:
var tree = new dhx.Tree("tree_container");
tree.data.parse(dataset);
Related sample: Tree. Basic Initialization
To save the current state of a tree, use the serialize method of Tree Collection. It converts the data of a tree into an array of JSON objects. Each JSON object contains the configuration of a separate row.
var state = tree1.data.serialize();
Then you can parse the data stored in the saved state array to a different tree. For example:
// creating a new Tree
var tree2 = new dhx.Tree(document.body);
// parsing the state of tree1 into tree2
tree2.data.parse(state);
Back to top