Skip to content
Related Articles
Open in App
Not now

Related Articles

EasyUI jQuery combotree widget

Improve Article
Save Article
  • Last Updated : 18 Apr, 2022
Improve Article
Save Article

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>

<!–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>

Example 1:

HTML




<html>
<head>
    <link rel="stylesheet" type="text/css"  
          href=
  
    <link rel="stylesheet" type="text/css"  
          href=
  
    <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/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!