Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/tree/loading_data/ below:

JavaScript Tree - Data Loading

There are several simple ways of loading data into DHTMLX Tree:

• on initialization of Tree
• after initialization of Tree

First, you need to prepare a data set that will be loaded into Tree.

DHTMLX Tree expects loaded data in the JSON format.

info

Please note that if you specify the id fields in the tree collection, their values should be unique. You can also omit the id fields in the tree collection. In this case they will be generated automatically.

Here is an example of an appropriate data set:

const dataset = [
    {
        "value": "Books",
        "id": "Books",
        "opened": true,
        "items": [
            {
                "value": "Thrillers",
                "id": "Thrillers",
                "opened": true,
                "items": [
                    {
                        "value": "Bestsellers",
                        "id": "Bestsellers",
                        "items": [
                            {
                                "value": "Lawrence Block",
                                "id": "Lawrence Block",
                            }
                        ]
                    },
                    {
                        "value": "Robert Crais",
                        "id": "Robert Crais",
                    },
                    {
                        "value": "Ian Rankin",
                        "id": "Ian Rankin",
                    },
                    {
                        "value": "James Johns",
                        "id": "James Johns",
                        "checked": true,
                    },
                    {
                        "value": "Nancy Atherton",
                        "id": "Nancy Atherton",
                        "checked": true
                    }
                ]
            },            
            {
                "value": "Fiction & Fantasy",
                "id": "Fiction & Fantasy",
                "items": [
                    {
                        "value": "Audrey Niffenegger",
                        "id": "Audrey Niffenegger"
                    },
                    {
                        "value": "Philip Roth",
                        "id": "Philip Roth"
                    }
                ]
            },
        ]
    },
];

const tree = new dhx.Tree("tree", {
    checkbox: true,
});

tree.data.parse(dataset);

Each object in the data set contains configuration of a tree item. The structure of an item is rather flexible. It may include:

You can load a predefined data set into Tree on the initialization stage. Use the data configuration property, as in:

const tree = new dhx.Tree("tree_container", {
    data: dataset
});

Related sample: Tree. Initialization with config.data

There are two ways to load data into Sidebar after its initialization:

• from a local data source
• from an external file

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:

const tree = new dhx.Tree("tree_container");
tree.data.parse(dataset);

Related sample: Tree. Initialization with data.parse()

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:

const tree = new dhx.Tree("tree_container");
tree.data.load("../common/dataset.json");

Related sample: Tree. Initialization with data.load()

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(){
   
});

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.

const state = tree1.data.serialize();

Then you can parse the data stored in the saved state array to a different tree. For example:

const tree2 = new dhx.Tree("tree_container2");

tree2.data.parse(state);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4