EasyUI jQuery tree widget Last Updated : 06 Jun, 2021 Comments Improve Suggest changes Like Article Like Report 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.phpSyntax: <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 dataonLoadSuccess" 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 nodegetRoots: Get the root nodesgetParent: Get the parent nodegetChildren: Get the children nodesgetChecked: 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 nodetoggle: 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> <!--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 <!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/ Comment More infoAdvertise with us Next Article EasyUI jQuery treegrid Widget T taran910 Follow Improve Article Tags : Web Technologies HTML JQuery EasyUI EasyUI-DataGrid & Tree +1 More Similar Reads jQuery EasyUI EasyUI jQuery is an HTML5 framework for using user interface components based on jQuery. It helps in building features for interactive web and mobile applications saving a lot of time for developers. EasyUI jQueryWhy EasyUI? EasyUI gives you the tools that you need to create modern and interactive J 2 min read Easy UI jQuery Introduction Easy UI 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. Features: We don't need to write much javascript code while using Ea 2 min read EasyUI jQuery Base WidgetsEasyUI jQuery Draggable widgetIn this article, we will learn how to design a draggable widget using jQuery EasyUI. 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 3 min read EasyUI jQuery Resizable widgetIn this article, we will learn how to design a resizable widget using jQuery EasyUI. A resizable widget makes the given element resizable. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Downloads for EasyUI for jQuery: https://www.jeasy 2 min read EasyUI jQuery pagination widgetIn this article, we will learn how to design a pagination widget using jQuery EasyUI. The pagination widget allows the user to navigate data by pages. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Downloads for EasyUI for jQuery: https 2 min read EasyUI jQuery searchbox widgetIn this article, we will learn how to design a search box widget using the jQuery EasyUI search box widget allows the user to search the data by searching the value. Easy UI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in b 2 min read EasyUI jQuery progressbar widgetIn this article, we will learn how to design a progress bar widget using the jQuery Easy UI progress bar. The component can be created from HTML markup or programmatically. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It help 2 min read EasyUI jQuery tooltip widgetIn this article, we will learn how to design a tooltip widget using jQuery EasyUI. 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 fo 2 min read EasyUI jQuery Base Widget Complete ReferenceThe EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interfa 1 min read EasyUI jQuery Layout WidgetsEasyUI jQuery panel widgetEasyUI 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 panels using jQuery Easy 4 min read EasyUI jQuery tabs WidgetEasyUI 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 tabs using jQuery EasyUI 4 min read EasyUI jQuery layout WidgetEasyUI 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 layout using jQuery Eas 3 min read EasyUI jQuery Layout Widget Complete ReferenceThe EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interfa 1 min read EasyUI jQuery Menu and Button WidgetsEasyUI jQuery menu widgetEasyUI 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 menu using jQuery Easy 3 min read EasyUI jQuery sidemenu widgetEasyUI 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 sidemenu using jQuery Ea 2 min read EasyUI jQuery linkbutton widgetEasyUI 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 link button using jQue 2 min read EasyUI jQuery menubutton widgetEasyUI 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 menu button using jQue 2 min read EasyUI jQuery splitbutton widgetEasyUI 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 splitbutton using jQuery 2 min read EasyUI jQuery switchbuttons widgetEasyUI 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 switchbutton using jQuer 2 min read EasyUI jQuery Menu and Button Widget Complete ReferenceThe EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interfa 1 min read EasyUI jQuery Form WidgetsEasyUI jQuery Form widgetEasyUI 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 form using jQuery EasyUI 3 min read EasyUI jQuery validateBox WidgetEasyUI 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 validate box using jQu 2 min read EasyUI jQuery textbox WidgetEasyUI 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 textbox using jQuery E 3 min read EasyUI jQuery passwordBox widgetEasyUI 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 passwordbox using jQue 2 min read EasyUI jQuery maskedBox WidgetEasyUI 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 masked box using jQuer 2 min read EasyUI jQuery comboBox widgetEasyUI 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 ComboBox using jQuery 3 min read EasyUI jQuery combotree widgetEasyUI 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 2 min read EasyUI jQuery combogrid widgetEasyUI is a 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 combogrid using jQuery E 2 min read EasyUI jQuery tagbox WidgetEasyUI is a 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 tagbox using jQuery Eas 2 min read EasyUI jQuery numberbox WidgetEasyUI 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 numberbox using jQuery 2 min read EasyUI jQuery datebox widgetEasyUI 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 datebox using jQuery E 2 min read EasyUI jQuery datetimebox widgetEasyUI 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 datetimebox using jQue 2 min read EasyUI jQuery calendar widgetEasyUI 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 calendar using jQuery 2 min read EasyUI jQuery spinner WidgetEasyUI 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 spinner using jQuery E 2 min read EasyUI jQuery timespinner widgetIn this article, we will learn how to design a time spinner using jQuery EasyUI. The TimeSpinner widget combines an editable text box and two small buttons that let the user choose a time value by increasing or decreasing the time. EasyUI is an HTML5 framework for using user interface components bas 2 min read EasyUI jQuery timepicker widgetEasyUI 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 time picker using jQue 2 min read EasyUI jQuery slider widgetEasyUI 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 slider using jQuery Ea 3 min read EasyUI jQuery fileBbox widgetEasyUI 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 FileBox using jQuery Ea 2 min read EasyUI jQuery checkbox widgetIn this article, we will learn how to design a checkbox using jQuery EasyUI. The checkbox widget is used for selecting multiple choices. Each choice can be enabled by clicking on the boxes. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue tech 2 min read EasyUI jQuery radiobutton widgetEasyUI 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 Radiobutton using jQue 2 min read EasyUI jQuery Form Widget Complete ReferenceThe EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interfa 1 min read EasyUI jQuery Window WidgetsEasyUI jQuery window widgetIn this article, we will learn how to design a window using jQuery EasyUI. The window widget is draggable panel that can be used as an application window. It floats on the page and can be moved anywhere required. EasyUI is an HTML5 framework for using user interface components based on jQuery, React 2 min read EasyUI jQuery dialog widgetEasyUI 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 dialog using jQuery Ea 2 min read EasyUI jQuery messager widgetEasyUI 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 messager using jQuery E 2 min read EasyUI jQuery Window Widget Complete ReferenceThe EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interfa 1 min read EasyUI jQuery DataGrid and Tree WidgetsEasyUI jQuery datalist widgetEasyUI 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 datalist using jQuery 2 min read EasyUI jQuery propertygrid widgetEasyUI is a 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 propertygrid using jQuer 1 min read EasyUI jQuery tree widgetEasyUI 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 jQu 4 min read EasyUI jQuery treegrid WidgetEasyUI 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 Ea 4 min read EasyUI jQuery DataGrid and Tree Widget Complete ReferenceThe EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing & building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interfa 1 min read Like