How to design checkbox selection for webpage 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 to design single and multiple select checkboxes using jQuery EasyUI plugin.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Note: Please take care of proper file paths while implementing the following codes.
Example 1: The following code demonstrates single select and de-select of checkboxes for datagrids implemented for a webpage. It also provides multiple select and de-select of checkboxes in out UI component.
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 Datagrid checkbox</ h2 > < p >Click the checkbox to select or de-select.</ p > < table id = "tableID" class = "easyui-datagrid" title = "Datagrid CheckBox Selection" style = "width:470px;height:400px" data-options="rownumbers:false,singleSelect:true, url:'datafile.json',method:'get',border:false"> < thead > < tr > < th data-options = "field:'ck',checkbox:true" ></ th > < th data-options = "field:'studentid',width:80" > < b >Student ID</ b > </ th > < th data-options = "field:'studentname',width:120" > < b >Student Name</ b > </ th > < th data-options="field:'age', width:80,align:'center'"> < b >Age</ b > </ th > < th data-options="field:'marksscored', width:100,align:'center'"> < b >Marks Scored</ b > </ th > < th data-options="field:'gender', width:60,align:'center'"> < b >Gender</ b > </ th > </ tr > </ thead > </ table > < div style = "margin:10px 0;" > < span >Selection Mode: </ span > < select onchange="$('#tableID') .datagrid({singleSelect:(this.value==0)})"> < option value = "0" >Select Single Row</ option > < option value = "1" >Select Multiple Rows</ option > </ select >< br /> Check On Select: < input type = "checkbox" checked onchange="$('#tableID').datagrid( {checkOnSelect:$(this).is(':checked')})"> < br /> Select On Check: < input type = "checkbox" checked onchange="$('#tableID').datagrid( {selectOnCheck:$(this).is(':checked')})"> < br /> </ div > </ body > </ html > |
Output:
- Datagrid checkbox screen:
- Datagrid checkbox execution:
Example 2:
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 Datagrid selection</ h2 > < p > Click the buttons to get data after single/multiple selection. </ p > < div style = "margin:20px 0;" > < a href = "#" class = "easyui-linkbutton" onclick = "getSelectedData()" > GetSelected </ a > < a href = "#" class = "easyui-linkbutton" onclick = "getMultipleData()" > GetSelections </ a > </ div > < table id = "tableID" class = "easyui-datagrid" title = "Datagrid CheckBox Selection" style = "width:470px;height:400px" data-options="rownumbers:false, singleSelect:true, url:'datafile.json', method:'get', border:false"> < thead > < tr > < th data-options = "field:'ck',checkbox:true" ></ th > < th data-options = "field:'studentid',width:80" > < b >Student ID</ b > </ th > < th data-options = "field:'studentname',width:120" > < b >Student Name</ b > </ th > < th data-options="field:'age', width:80,align:'center'"> < b >Age</ b > </ th > < th data-options="field:'marksscored', width:100, align:'center'"> < b >Marks Scored</ b > </ th > < th data-options="field:'gender', width:60,align:'center'"> < b >Gender</ b > </ th > </ tr > </ thead > </ table > < div style = "margin:10px 0;" > < span >Single/Multiple Mode: </ span > < select onchange="$('#tableID').datagrid({ singleSelect:(this.value==0)})"> < option value = "0" >Single Row</ option > < option value = "1" >Multiple Rows</ option > </ select >< br /> </ div > < script > function getSelectedData() { var row = $('#tableID').datagrid('getSelected'); if (row) { /* If row is selected, it displays data */ $.messager.alert('Details', row.studentid + ":" + row.studentid + ": " + ",Gender: " + row.gender + ",Name: " + row.studentid + ": " + row.studentname); } } function getMultipleData() { /* This array is used to push data */ var resultArray = []; var rows = $('#tableID') .datagrid('getSelections'); /* Traversing through multiple selection */ for (var i = 0; i < rows.length ; i++) { var row = rows [i]; /* Push multiple selection in result array */ resultArray.push('<span>' + row.studentid + ":" + row.studentid + ": " + ", Gender:" + row.gender + ", Name: " + row.studentid + ": " + row.studentname + '</ span >'); } $.messager.alert('Details', resultArray.join('< br />')); } </ script > </ body > </ html > |
Output: