EasyUI jQuery combotree widget

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.

In this article, we will learn how to design a combotree using jQuery EasyUI. The combotree combines the selection control with a drop-down tree.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-combotree">

Properties:

editable: Defines if user can type text directly into the field.
textField: The underlying data field name to bind to this ComboTree.

Methods:

options: Return the options object.
clear: Clear the component value.
setValues: Set the component value array.
setValue: Set the component value.
tree: Return the tree object.
loadData: Load the locale tree data.
reload: Request the remote tree data again.

CSN Link: First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.min.js"></script>  <script type="text/javascript" src="jquery.easyui.mobile.js"></script>

Example 1:

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css"  
          href=
"https://www.jeasyui.com/easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css"  
          href=
"https://www.jeasyui.com/easyui/themes/icon.css">

    <script type="text/javascript" src="jquery.min.js">  
    </script>  

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

    <!--jQuery library of EasyUI Mobile -->

    <script type="text/javascript"
        src="jquery.easyui.mobile.js">  
    </script> 
    
    <script type="text/javascript">
        $(document).ready(function (){
            $('#gfg').combotree({
                editable: false,
                dnd: false
            });
        });
        
    </script>
</head>
<body>
<h2>GeeksforGeeks</h2>
    
<p>EasyUI jQuery combotree widget</p>

    <div class="easyui-panel" style="padding:5px">
    <div id="gfg">
        <div style="margin-bottom:20px">
            <input class="easyui-combotree" style="width:100%">
        </div>
    </div>
      </div>
  
</body>
</html>

Output:

Reference: http://www.jeasyui.com/documentation/

EasyUI jQuery combotree widget

Explore