How to design combogrids using jQuery EasyUI ?
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.
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 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.
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 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: