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="https://www.geeksforgeeks.org/jquery.min.js"></script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"src="https://www.geeksforgeeks.org/jquery.easyui.min.js"></script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"src="https://www.geeksforgeeks.org/jquery.easyui.mobile.js"></script>
Example 1:
<!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>
Output:
Reference: http://www.jeasyui.com/documentation/