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=”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:
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css" href=
<link rel="stylesheet" type="text/css" href=
<script type="text/javascript" src=
</script>
<script type="text/javascript" src=
</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:
Treegrid
Reference: http://www.jeasyui.com/documentation/