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.
The combotree is a UI component that is a combination of a drop-down tree with select control.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Note: Please take care of proper file paths for the pre-compiled files while implementing the following codes.
Example 1: The following example demonstrates the basic combotree using the file “dataTree.json” and jQuery EasyUI libraries.
<!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 >
</ head >
< body >
< h2 >jQuery EasyUI ComboTree</ h2 >
< p >
Click the button to show
the data tree.
</ p >
< div style = "margin: 20px 0" ></ div >
<!-- easyui-panel class is used -->
< div class = "easyui-panel" style=
"width: 100%; max-width: 400px;
padding: 30px 60px;">
< div style = "margin-bottom: 20px" >
<!--easyui-combotree class is used-->
< input class = "easyui-combotree" value = "131" data-options=
"url: 'dataTree.json',
method: 'get',
label: 'Select Node:',
labelPosition: 'top'"
style = "width:100%" >
</ div >
</ div >
</ body >
</ html >
|
dataTree.json: The following is the code for the file “dataTree.json” which is used in all the examples for data.
[{ "id" :1,
"text" : "Users" ,
"children" :[{
"id" :11,
"text" : "Photos" ,
"state" : "closed" ,
"children" :[{
"id" :101,
"text" : "Family"
},{
"id" :102,
"text" : "Colleagues"
},{
"id" :103,
"text" : "Relatives"
}]
},{
"id" :12,
"text" : "Program Files" ,
"children" :[{
"id" :131,
"text" : "Intel"
},{
"id" :132,
"text" : "nodejs" ,
"attributes" :{
"p1" : "my Attribute1" ,
"p2" : "my Attribute2"
}
},{
"id" :133,
"text" : "Common files"
},{
"id" :134,
"text" : "Mail" ,
"checked" : true
}]
},{
"id" :13,
"text" : "home.html"
},{
"id" :14,
"text" : "tutorials.html"
},{
"id" :15,
"text" : "jobs.html"
}]
}] |
Output:
-
ComboTree with initialized value:
-
Basic ComboTree:
Example 2: The following code demonstrates the basic methods performed on the combotree.
<!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 >
</ head >
< body >
< h2 >jQuery EasyUI ComboTree </ h2 >
< p >Click the buttons </ p >
< div class = "easyui-panel" style=
"width: 100%; max-width: 400px;
padding: 30px 60px;">
< div style = "margin-bottom: 20px" >
< input id = "combotreeID" class = "easyui-combotree" data-options="url: 'dataTree.json',
method: 'get',
label: 'Select folder/file:',
labelPosition: 'top'"
style = "width:100%" >
</ div >
</ div >
< div style = "height:10px" ></ div >
< div id = "resultDivID" ></ div >
< div style = "margin:20px 0" >
<!-- easyui-linkbutton class
is used to link -->
< a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "getValue()" >
GetValue
</ a >
< a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "setValue()" >
SetValue
</ a >
< a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "disable()" >
Disable
</ a >
< a href = "javascript:void(0)" class = "easyui-linkbutton" onclick = "enable()" >
Enable
</ a >
</ div >
< script type = "text/javascript" >
/* Method to get value */
function getValue() {
var val = $('#combotreeID')
.combotree('getValue');
$('#resultDivID')
.html(val + " is set");
}
/* Method to set value */
function setValue() {
$('#combotreeID')
.combotree('setValue', '103');
}
/* Method to disable select button */
function disable() {
$('#combotreeID')
.combotree('disable');
}
/* Method to enable select button */
function enable() {
$('#combotreeID')
.combotree('enable');
}
</ script >
</ body >
</ html >
|
Output:
-
Before execution:
-
After execution: