EasyUI jQuery tree widget

Last Updated : 06 Jun, 2021

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 combotreegrid using jQuery EasyUI. tree displays hierarchical data in a tree structure in a web page

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-tree">

Properties:

url: a URL to retrieve remote data.
method: The http method to retrieve data.
animate: Defines if to show animation effect when node expand or collapse.
checkbox: Defines if to show the checkbox before every node.
cascadeCheck: Defines if to cascade check.
onlyLeafCheck: Defines if to show the checkbox only before leaf node.
lines: Defines if to show lines between tree nodes.
dnd: Defines if to enable drag and drop.
data: The node data to be loaded.
queryParams: The additional parameters that will be sent to server when requesting remote data.
formatter: Defines how to render the node's text.
filter: Defines how to filter the local tree data.
loader: Defines how to load data from remote server.
loadFilter: Return the filtered data to display.

Events:

onClick: Fires when user click a node.
onDblClick: Fires when user dblclick a node.
onBeforeLoad: Fires before a request is made to load data
onLoadSuccess" Fires when data loaded successfully.
onLoadError: Fires when data loaded fail.
onBeforeExpand: Fires before node is expanded.
onExpand: Fires when node is expanded.
onBeforeCollapse: Fires before node is collapsed.
onCollapse: Fires when node is collapsed.
onBeforeCheck: Fires before users click the checkbox.
onCheck: Fires when users click the checkbox.
onBeforeSelect: Fires before node is selected.
onSelect: Fires when node is selected.
onContextMenu: Fires when node is right clicked.
onBeforeDrag: Fires when a node's dragging starts.
onStartDrag: Fires when start dragging a node.
onStopDrag: Fires after stop dragging a node.
onDragEnter: Fires when a node is dragged enter some target node that can be dropped to.
onDragOver: Fires when a node is dragged over some target node that can be dropped to.
onDragLeave: Fires when a node is dragged leave some target node that can be dropped to.
onBeforeDrop: Fires before a node is dropped, return false to deny drop.
onDrop: Fires when a node is dropped.
onBeforeEdit: Fires before edit node.
onAfterEdit: Fires after edit node.
onCancelEdit: Fires when cancel the editing action.

Methods:

options: Return the options of tree.
loadData: Load the tree data.
getNode: get the specified node object.
getData: get the specified node data, including its children.
reload: Reload tree data.
getRoot: Get the root node
getRoots: Get the root nodes
getParent: Get the parent node
getChildren: Get the children nodes
getChecked: Get the checked nodes.
getSelected: Get the selected node and return it.
isLeaf: Determine the specified node is leaf.
find: the specified node and return the node object.
findBy: Find the specified node by field.
select: Select a node.
check; Set the specified node to checked.
uncheck: Set the specified node to unchecked.
collapse: Collapse a node.
expand: Expand a node.
collapseAll: Collapse all nodes.
expandAll: Expand all nodes.
expandTo: Expand from root to specified node.
scrollTo: Scroll to the specified node.
append: Append some children nodes to a parent node
toggle: Toggles expanded/collapsed state of the node.
insert: Insert a node to before or after specified node.
remove: Remove a node and it's children nodes.
pop: Pop a node and it's children nodes.
update: Update the specified node.
enableDnd: Enable drag and drop feature.
disableDnd: Disable drag and drop feature.
beginEdit: Begin editing a node.
endEdit: End editing a node.
cancelEdit: Cancel editing a node.
doFilter: Do the filter action.

CDN 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

<!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> 
     
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 
    <script type="text/javascript">
        $(document).ready(function (){
            $('#gfg').tree({
                dnd: false,
                animate: true
            });
        });
        
    </script>
</head>
<body>
    <h2>GeeksforGeeks</h2>
    
<p>EasyUI jQuery tree widget</p>

    <div class="easyui-panel" style="padding:5px">
        <ul id='gfg'>
            <li>
                <span>GeeksforGeeks</span>
                <ul>
                    <li data-options="state:'closed'">
                        <span>GfG1</span>
                        <ul>
                            <li>
                                <span>Geeks</span>
                            </li>
                            <li>
                                <span>for</span>
                            </li>
                            <li>
                                <span>Geeks</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>Courses</span>
                        <ul>
                            <li>Self Placed</li>
                            <li>DSA</li>
                            <li>Web Development</li>
                        </ul>
                    </li>
                    <li>Geeks</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>