EasyUI jQuery treegrid 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 treegrid using jQuery EasyUI. The treegrid is used to show hierarchical data in a grid.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-treegrid">

Properties:

idField: Indicate which field is an identity field.
treeField: Defines the tree node field.
animate: Defines if to show animation effect when node expands or collapses.
checkbox: Defines if to show the checkbox before every row 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 treegrid nodes.
loader: How to load data from a remote server. Return false can abort this action.
loadFilter: Return the filtered data to display.

Events:

onLoadSuccess: It gets fired when data is loaded successfully.
onLoadError: It gets fired when some errors occur to load remote data.
onBeforeLoad: It gets fired before a request is made to load data.
onClickRow: It gets fired when the user clicks a row, the parameters contain.
onDblClickRow: It gets fired when the user double-clicks a row, the parameters contain.
onClickCell: It gets fired when the user clicks a cell.
onDblClickCell: It gets fired when the user double-clicks a cell.
onBeforeSelect: It gets fired before the user selects a row.
onSelect: It gets fired when the user selects a row.
onBeforeUnselect: It gets fired before the user unselects a row.
onUnselect: It gets fired when the user unselects a row.
onBeforeCheckNode: It gets fired before the user checks a row.
onCheckNode: It gets fired when the user checks a row.
onBeforeExpand: It gets fired before a row is expanded
onExpand: It gets fired on row expansion.
onBeforeCollapse: It gets fired before a row is collapsed.
onCollapse: It gets fired when a row is collapsed.
onContextMenu: It gets fired when a row is right-clicked.
onBeforeEdit: It gets fired when the user starts editing a row.
onAfterEdit: It gets fired when the user finishes editing.
onCancelEdit: It gets fired when the user cancels editing a row.

Methods:

options: It returns the options of the tree grid.
resize: It sets treegrid size.
fixRowHeight: It fixes the specified row height.
loadData: It loads the treegrid data.
load: It loads and shows the first page.
reload: It reloads treegrid data.
reloadFooter: It reloads footer data.
getData: It gets the loaded data.
getFooterRows: It gets the footer data.
getRoot: It gets the root node, returns the node object
getRoots: It gets the root nodes, returns the node array.
getParent: It gets the parent node.
getChildren: It gets the children nodes.
getSelected: It gets the selected node and returns it, if no node selected return null.
getSelections: It gets all selected nodes.
getCheckedNodes: It gets all checked rows.
getLevel: It gets the specified node level.
find: It finds the specified node and returns the node data.
select: It selects a node.
unselect: It unselects a node.
selectAll: It selects all nodes.
unselectAll: It unselect all nodes.
checkNode: It sets the specified row node to check.
uncheckNode: It sets the specified row node to uncheck
collapse: It collapse a node.
expand: It expand a node.
collapseAll: It collapse all nodes.
expandAll: It expands all nodes.
expandTo: It expands from root to specified node.
toggle: It toggles the expanded/collapsed state of the node.
append: It appends nodes to a parent node.
remove: It removes a node and its children nodes.
pop: It pops and returns node data including its children after removing that node.
refresh: It refreshes the specified node.
update: It updates the specified node
beginEdit: It begin editing a node.
endEdit: It ends editing a node.
cancelEdit: It cancels editing a node.
getEditors: It gets the specified row editors.
getEditor: It gets the specified editor.
showLines: It displays the treegrid lines.

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

<script type="text/javascript" src="https://www.geeksforgeeks.org/jquery.min.js"> </script>  <script type="text/javascript" src="https://www.geeksforgeeks.org/jquery.easyui.min.js"> </script>  <script type="text/javascript" src="https://www.geeksforgeeks.org/jquery.easyui.mobile.js"> </script>

Example:

HTML

<!DOCTYPE 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=
        "https://www.jeasyui.com/easyui/jquery.min.js">
    </script>

    <script type="text/javascript" src=
    "https://www.jeasyui.com/easyui/jquery.easyui.min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#gfg').treegrid({
                rownumbers: true,
                showFooter: true,
                idField: 'id',
                treeField: 'region',
                animate: true
            });
        });
    </script>
</head>

<body>
    <h2>GeeksforGeeks</h2>

    <p>jQuery EasyUI TreeGrid Widget</p>

    <div style="margin:20px 0;"></div>
    <table id='gfg' title="EasyUI TreeGrid">
        <thead>
            <tr>
                <th colspan="4">Geek1</th>
                <th colspan="4">Geek2</th>
            </tr>
            <tr>
                <th field="1" width="60" 
                    align="Center">A</th>

                <th field="2" width="60" 
                    align="Center">B</th>

                <th field="3" width="60" 
                    align="Center">C</th>
                
                <th field="4" width="60" 
                    align="Center">D</th>
                
                <th field="5" width="60" 
                    align="Center">E</th>
                
                <th field="6" width="60" 
                    align="Center">F</th>
                
                <th field="7" width="60" 
                    align="Center">G</th>
                
                <th field="8" width="60" 
                    align="Center">H</th>
            </tr>
        </thead>
    </table>
</body>

</html>

Output:

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

EasyUI jQuery treegrid Widget

Explore