EasyUI 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 combogrids. Combogrids are the combination of both editable input boxes with a dropdown grid panel.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Example 1: The following code demonstrates the basic combogrid using jQuery EasyUI plugin.
<!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 ComboGrid</ h2 >
< p >Click the dropdown arrow to show the data.</ p >
< div style = "margin:20px 0" ></ div >
< div class = "easyui-panel" style="width:100%;
max-width:400px; padding:30px 60px;">
< div style = "margin-bottom:20px" >
< select class = "easyui-combogrid" style = "width:100%" data-options="
panelWidth: 600,
panelMinWidth: '50%',
idField: 'studentid',
textField: 'studentname',
url: 'datafile.json',
method: 'get',
value: 'ST-1',/*Initialize value*/
columns: [[{
field: 'studentid',
title: 'Student ID',
width: 100
},
{
field: 'studentname',
title: 'Name',
width: 120
},
{
field: 'age',
title: 'Age',
width: 80,
align: 'right'
},
{
field: 'marksscored',
title: 'Marks',
width: 150,
align: 'center'
},
{
field: 'gender',
title: 'Gender',
width: 60,
align: 'center'
}]],
fitColumns: true,
label: 'Select Student:',
labelPosition: 'top'
">
</ select >
</ div >
</ div >
</ body >
</ html >
|
datafile.json The following is the code for the “datafile.json” file used in all the examples.
{"total":10,"rows":[ {"studentname":"Komal","age":10,"gender":"F", "marksscored":365,"studentid":"ST-1"}, {"studentname":"Dalton","age":12,"gender":"M", "marksscored":185,"studentid":"ST-10"}, {"studentname":"Rakesh","age":12,"gender":"M", "marksscored":385,"studentid":"ST-11"}, {"studentname":"Ram","age":12,"gender":"M", "marksscored":265,"studentid":"ST-12"}, {"selected":true,"studentname":"Ila","age":12,"gender":"P", "marksscored":355,"studentid":"ST-13"}, {"studentname":"Manika","age":12,"gender":"F", "marksscored":158,"studentid":"ST-14"}, {"studentname":"Madhavi","age":12,"gender":"F", "marksscored":456,"studentid":"ST-15"}, {"studentname":"Preity","age":12,"gender":"M", "marksscored":235,"studentid":"ST-16"}, {"studentname":"Parul","age":12,"gender":"F", "marksscored":564,"studentid":"ST-17"}, {"studentname":"Amar","age":19,"gender":"F", "marksscored":638,"studentid":"ST-18"} ]}
Output:
- Basic output:
-
Combogrid with initial value:
-
Combogrid execution:
Example 2: The following example demonstrates basic actions related to combogrid.
<!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 ComboGrid</ h2 >
< p >Click the buttons to perform some actions.</ p >
< div class = "easyui-panel" style="width: 100%;
max-width: 400px; padding: 30px 60px;">
< div style = "margin-bottom:20px" >
< input id = "combogridID" class = "easyui-combogrid" style = "width:100%" data-options="
panelWidth: 600,
idField: 'studentid',
textField: 'studentname',
url: 'datafile.json',
method: 'get',
columns: [[
{
field: 'studentid',
title: 'Student ID',
width: 100
},
{
field: 'studentname',
title: 'Name',
width: 120
},
{
field: 'age',
title: 'Age',
width: 80,
align: 'right'
},
{
field: 'marksscored',
title: 'Marks',
width: 150,
align: 'center'
},
{
field: 'gender',
title: 'Gender',
width: 60,
align: 'center'
}
]],
fitColumns: true,
label: 'Select Student:',
labelPosition: 'top'
">
</ div >
</ div >
< div style = "margin:20px 0" >
< div style = "margin:20px 0" >
< 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 = "setCustomValue()" >
Set Custom Value
</ 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 >
< div id = "getValueResult" ></ div >
</ div >
< script type = "text/javascript" >
/* To set and get value */
function getValue() {
var val = $('#combogridID').combogrid('getValue');
$('#getValueResult').html(val + " is set");
}
function setValue() {
$('#combogridID').combogrid('setValue', 'ST-14');
}
function setCustomValue() {
$('#combogridID').combogrid('setValue', {
studentid: 'ST-19',
studentname: 'Pari'
});
}
/* To disable the combogrid */
function disable() {
$('#combogridID').combogrid('disable');
}
/* To enable the combogrid */
function enable() {
$('#combogridID').combogrid('enable');
}
</ script >
</ body >
</ html >
|
Output:
- Basic Screen:
-
Action demonstration:
- Custom setting: