如何使用jQuery EasyUI Mobile编辑数据表格中的行
EasyUI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能,为开发者节省大量时间。
在这篇文章中,我们将学习使用jQuery EasyUI Mobile插件来编辑Datagrid的行。
EasyUI for jQuery的下载:
https://www.jeasyui.com/download/index.php
示例1:下面的例子演示了使用jQuery EasyUI Mobile的基本数据表格。
<!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>
<!--jQuery libraries of EasyUI Mobile-->
<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">
<thead>
<tr>
<th data-options="field:'studentid',width:80">
Student ID
</th>
<th data-options="field:'studentname',
width:100">
Student Name
</th>
<th data-options="field:'age',
width:80,align:'center'">
Age
</th>
<th data-options="field:'marksscored',
width:80,align:'center'">
Marks Scored
</th>
</tr>
</thead>
</table>
<div id="headerID">
<div class="m-toolbar">
<div class="m-title">
Basic DataGrid
</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 () {
/* Initialize datagrid */
('#tableID').datagrid({
data: data
});
});
</script>
</body>
</html>
输出:
例2:下面的例子演示了根据任何行的索引来编辑和删除数据表格中的行。
<!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>
<!--jQuery libraries of EasyUI Mobile-->
<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>
<!--editor:textbox is used for
editing this field-->
<th data-options="
field:' studentname',
width: 100,
editor: 'textbox'">
Student Name
</th>
<!--editor:numberbox is used
for editing this field-->
<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>
输出:
Delete row:
Update row: