How to design combotree using jQuery EasyUI ?

Last Updated : 29 Jul, 2024

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

The combotree is a UI component that is a combination of a drop-down tree with select control.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Note: Please take care of proper file paths for the pre-compiled files while implementing the following codes.

Example 1: The following example demonstrates the basic combotree using the file “dataTree.json” and jQuery EasyUI libraries.

html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
            maximum-scale=1.0, user-scalable=no">

    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css">

    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">

    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">

    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js">
    </script>

    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
</head>

<body>
    <h2>jQuery EasyUI ComboTree</h2>

    <p>
        Click the button to show 
        the data tree.
    </p>

    <div style="margin: 20px 0"></div>

    <!-- easyui-panel class is used -->
    <div class="easyui-panel" style=
        "width: 100%; max-width: 400px;
        padding: 30px 60px;">

        <div style="margin-bottom: 20px">

            <!--easyui-combotree class is used-->
            <input class="easyui-combotree" 
                value="131" data-options=
                "url: 'dataTree.json', 
                method: 'get', 
                label: 'Select Node:',
                labelPosition: 'top'" 
                style="width:100%">
        </div>
    </div>
</body>

</html>

dataTree.json: The following is the code for the file "dataTree.json" which is used in all the examples for data.

JavaScript

[{
    "id":1,
    "text":"Users",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":101,
            "text":"Family"
        },{
            "id":102,
            "text":"Colleagues"
        },{
            "id":103,
            "text":"Relatives"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":131,
            "text":"Intel"
        },{
            "id":132,
            "text":"nodejs",
            "attributes":{
                "p1":"my Attribute1",
                "p2":"my Attribute2"
            }
        },{
            "id":133,
            "text":"Common files"
        },{
            "id":134,
            "text":"Mail",
            "checked":true
        }]
    },{
        "id":13,
        "text":"home.html"
    },{
        "id":14,
        "text":"tutorials.html"
    },{
        "id":15,
        "text":"jobs.html"
    }]
}]

Output:

Example 2: The following code demonstrates the basic methods performed on the combotree.