How to design combotree 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 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.
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 > </ 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.
Javascript
[{ "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.
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 > </ 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: