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

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

JavaScript Tree - Work with Tree

You can enable checkbox for tree items with the checkbox configuration option. Then you can manipulate items with checkboxes with the help of Tree API.

To check the checkbox of a particular tree item, apply the checkItem() method. It takes the id of an item as a parameter:

tree.checkItem("history");

The uncheckItem() method will uncheck a tree item by its id together with its sub-items.

tree.uncheckItem("history");

Related sample: Tree. Check / uncheck Item

There is a possibility to get the list of all checked items in a tree with the getChecked() method. It returns an array of ids of checked items, e.g.:

Related sample: Tree. Get checked items

To expand a particular folder in a tree by its id, use the expand() method:

To collapse a tree item, make use of the collapse() method:

tree.collapse("history");

Related sample: Tree. Expand item

You can also alternately expand/collapse a tree item (folder) via the toggle() method:

Related sample: Tree. Toggle item

It is also possible to expand/collapse all Tree items using the two corresponding methods - expandAll() and collapseAll():

tree.expandAll();

tree.collapseAll();

Related sample: Tree. Expand all items

There is the editItem() method that allows editing a certain tree item. Pass the id of an item to the method to initiate editing:

The method can also take a second parameter to configure the editing process. It may include two properties:

• "text" (by default) for an input
• "select" for a select

For instance:

tree.events.on("itemDblClick", function (id) {
    tree.editItem(id,{ mode: "select", options: [1, 2, 3, 4, 5] });
});

You can get/set the state of a tree using the Tree API - setState() and getState(). getState() returns an object with the state of a tree, while setState() takes an object with tree state as a parameter:

const treeState = tree.getState();
 

tree.setState(treeState);

Related sample: Tree. Getting Tree state

Related sample: Tree. Setting Tree state

The treeState object contains key:value pairs, where key is the id of a tree item and value is its state. The state object of a tree item includes two properties:

• 0 - unselected
• 1 - selected
• 2 - indeterminate (for the parent item, in case its children are partially checked)

Here is an example of a treeState object:

{
    "books": {
        "open": true,
        "selected": 2
    },

    "mystery": {
        "open": true,
        "selected": 2
    },

    "bsthrillers": {
        "selected": 1
    },

    "rc": {
        "selected": 0
    },

    "ir": {
        "selected": 1
    },

    "history": {
        "selected": 0
    },

    "jmf": {
        "selected": 0
    },

    "jd": {
        "selected": 0
    }
}

You can manipulate Tree items with the help of the Tree collection API.

It is possible to add more items into the initialized Tree on the fly. Use the add() method of Tree Collection. It takes three parameters:

tree.data.add({"value": "Life"}, -1, "Magazines");

Related sample: Tree. Adding and removing items

You can change config options of the item via the update() method of Tree Collection. It takes two parameters:

For example, you can change the value of an item:

tree.data.update("item_id", {value: "New value"});

Or you can disable displaying of a checkbox for a tree item:

tree.data.update("Books", {checkbox:false});

You can get the parent of an item using the getItem method of tree collection.

tree.data.getItem("Thrillers").parent


tree.data.getItem("Books").parent

where

• parent - (string) the id of the parent of a tree item

Related sample: Tree. Data update

To remove an item, make use of the remove() method of Tree Collection. Pass the id of the item that should be removed to the method:

Related sample: Tree. Adding and removing items

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