Skip to content
Related Articles

Related Articles

Improve Article

EasyUI jQuery combotree widget

  • Last Updated : 13 Apr, 2021
Geek Week

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. combotree combines the selection control with 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/

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :