<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
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"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
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
>