Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to design combotree using jQuery EasyUI ?

  • Last Updated : 21 Dec, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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: 

  • ComboTree with initialized value:
  • Basic ComboTree:

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:

  • Before execution:
  • After execution:



My Personal Notes arrow_drop_up
Recommended Articles
Page :