<!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
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.mobile.js"
>
</
script
>
</
head
>
<
body
>
<
table
id
=
"tableID"
data-options="
header: '#headerID',
singleSelect: true,
border: false,
fit: true,
fitColumns: true,
scrollbarSize: 0,
iconCls: 'icon-edit',
border: false,
scrollbarSize: 0,
data: data,
onClickRow: onClickRow">
<
thead
>
<
tr
>
<
th
data-options="
field: 'studentid',
width: 80">
Student ID
</
th
>
<
th
data-options="
field:' studentname',
width: 100,
editor: 'textbox'">
Student Name
</
th
>
<
th
data-options="
field: 'age', width: 80,
align: 'center',
editor: 'numberbox'">
Age
</
th
>
<
th
data-options="
field: 'marksscored',
width: 80,
align: 'center',
editor: {
type: 'numberbox',
options: {precision:1}
}">
Marks Scored
</
th
>
</
tr
>
</
thead
>
</
table
>
<
div
id
=
"headerID"
>
<
div
class
=
"m-toolbar"
>
<
div
class
=
"m-title"
>
Edit DataGrid
</
div
>
<
div
class
=
"m-right"
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
data-options
=
"iconCls: 'icon-remove', plain: true"
onclick
=
"remove()"
>
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
data-options
=
"iconCls: 'icon-save', plain: true"
onclick
=
"save()"
>
</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var data = [
{
"studentid": "Student01",
"studentname": "Smitha",
"age": 11, "marksscored": 365
},
{
"studentid": "Student02",
"studentname": "Jack",
"age": 16, "marksscored": 465
},
{
"studentid": "Student03",
"studentname": "Tom",
"age": 12, "marksscored": 369
},
{
"studentid": "Student04",
"studentname": "Ram",
"age": 14, "marksscored": 565
},
{
"studentid": "Student05",
"studentname": "Srini",
"age": 13, "marksscored": 265
}
];
$(function () {
$('#tableID').datagrid({
data: data
});
});
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#tableID').datagrid('validateRow', editIndex)) {
$('#tableID').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
/* function called when one row is clicked*/
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#tableID').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
}
else {
$('#tableID').datagrid('selectRow', editIndex);
}
}
}
/* Delete function */
function remove() {
if (editIndex == undefined) { return }
$('#tableID').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
/* Save function */
function save() {
if (endEditing()) {
$('#tableID').datagrid('acceptChanges');
}
}
</
script
>
</
body
>
</
html
>