How to design checkbox selection for webpage using jQuery EasyUI ?
Last Updated :
25 Jul, 2024
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:
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:
Similar Reads
How to design complex layout 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 the basic and complex layout fo
4 min read
How to design calendar for web page 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 a calendar feature for our
2 min read
How to design menu on right click of 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. It helps in building features for interactive web and mobile applicati
3 min read
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
3 min read
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 t
3 min read
How to design menu using jQuery EasyUI Mobile ? In this article, we will learn how to design menu list using jQuery EasyUI Mobile plugin. 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 ti
2 min read