Open In App

How to design combotree using jQuery EasyUI ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

  • 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:


Last Updated : 21 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads