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.

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 buttons </p>

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

        <div style="margin-bottom: 20px">
            <input id="combotreeID" 
                class="easyui-combotree" 
                data-options="url: 'dataTree.json',
                method: 'get', 
                label: 'Select folder/file:',
                labelPosition: 'top'" 
                style="width:100%">
        </div>
    </div>

    <div style="height:10px"></div>
    <div id="resultDivID"></div>
    <div style="margin:20px 0">

        <!-- easyui-linkbutton class 
            is used to link  -->
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="getValue()">
            GetValue
        </a>
        
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="setValue()">
            SetValue
        </a>
        
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="disable()">
            Disable
        </a>
        
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="enable()">
            Enable
        </a>
    </div>

    <script type="text/javascript">

        /* Method to get value */
        function getValue() {
            var val = $('#combotreeID')
                .combotree('getValue');

            $('#resultDivID')
                .html(val + " is set");
        }

        /* Method to set value */
        function setValue() {
            $('#combotreeID')
                .combotree('setValue', '103');
        }

        /* Method to disable select button */
        function disable() {
            $('#combotreeID')
                .combotree('disable');
        }

        /* Method to enable select button */
        function enable() {
            $('#combotreeID')
                .combotree('enable');
        }
    </script>
</body>

</html>

Output:

Getting Started with jQuery

geetanjali16

Improve

Article Tags :

How to design combotree using jQuery EasyUI ?

Similar Reads

jQuery Selectors

jQuery Events

jQuery Effects

jQuery HTML/CSS

jQuery Traversing

Thank You!

What kind of Experience do you want to share?