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 combotree using jQuery EasyUI. The combotree combines the selection control with a drop-down tree.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<input class="easyui-combotree">
Properties:
- editable: Defines if user can type text directly into the field.
- textField: The underlying data field name to bind to this ComboTree.
Methods:
- options: Return the options object.
- clear: Clear the component value.
- setValues: Set the component value array.
- setValue: Set the component value.
- tree: Return the tree object.
- loadData: Load the locale tree data.
- reload: Request the remote tree data again.
CSN 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
<html>
<head>
<link rel="stylesheet" type="text/css"
href=
<link rel="stylesheet" type="text/css"
href=
<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>
<script type="text/javascript">
$(document).ready(function (){
$('#gfg').combotree({
editable: false,
dnd: false
});
});
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>EasyUI jQuery combotree widget</p>
<div class="easyui-panel" style="padding:5px">
<div id="gfg">
<div style="margin-bottom:20px">
<input class="easyui-combotree" style="width:100%">
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: http://www.jeasyui.com/documentation/