Webix Tree can get data in the following predefined data formats:
Details and examples of data formats in tree-like structures
There are two main ways you can specify the data source for Tree:
Both methods lead to the same result.
If you load XML data you need to set the datatype property in the constructor config or the second parameter of the parse / load method to the name of the expected data type, i.e. 'xml'.
If you want to specify the data set directly on the page, you can use:
Specifying data inline
treedata = [
{ id: "1", value: "Book 1", data: [
{ id: "1.1", value: "Part 1" },
{ id: "1.2", value: "Part 2" }
]},
{ id: "2", value: "Book 2", data: [
{ id: "2.1", value: "Part 1" }
]}
];
tree = new webix.ui({
view: "tree",
...
data: treedata
});
//or
tree.parse(treedata)
Related sample: Tree: JSON Dataset
To load data from a file on the server, you can use:
Remember, in case of XML data you should specify the data type explicitly as 'xml':
tree = new webix.ui({
view: "tree",
...
url: "data/data.xml",
datatype: "xml"
});
//or
tree.load('data/data.xml', 'xml');
Related sample: Tree: JSON Dataset
It's possible to load plain (list-like) data into the tree. The tree structure is achieved by means of grouping. Grouping is specified through the $group key of the scheme parameter.
tree = new webix.ui({
view: "tree",
scheme: {
$group: "#make#",
},
data: [
{ id: 1, value: "Avalon", make: "Toyota" },
{ id: 2, value: "Corolla", make: "Toyota" },
{ id: 3, value: "Camry", make: "Toyota" },
{ id: 4, value: "Octavia", make: "Skoda" },
{ id: 5, value: "Superb", make: "Skoda" }
]
});
Related sample: Tree: Plain JSON Data with Client-side Grouping
To load data from a database on the server you should deal with both client and server sides.
On the client side
You should either define a url property or call the load method that would point to a server REST API endpoint.
Static loading from a server database. Client-side code.
tree = new webix.ui({
...
url: "data/tree_data.php"
});
//or
tree.load("data/tree_data.php");
On the server side
If using dhtmlxConnector, the related server-side script will look like this:
Static loading from a MySQL database on the server. Server-side code.
require_once("../connector-php/codebase/data_connector.php"); // includes the connector file
$conn = mysql_connect('localhost', "root",""); // creates a connection
mysql_select_db("sampleDB"); // selects a database
$data = new TreeDataConnector($conn, "MySQL"); //initializes the connector object
// loads data from the specified database table
$data->render_table("packages_tree","id","value, state","","parent_id");
Related sample: Dynamic Loading
Back to top