jQuery EasyUI是一个基于jQuery的开源用户界面（UI）插件库，它提供了创建Web应用程序所需的所有基本功能，CRUD（Create, Read, Update, Delete）操作是任何Web应用程序的基础，本文将探讨如何使用jQuery EasyUI进行CRUD操作。
我们需要在HTML文件中引入jQuery和EasyUI的相关文件，这可以通过在HTML文件的头部添加以下代码来完成：
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
接下来，我们可以创建一个数据表格来显示数据，在HTML文件中添加以下代码：
<table id="dg" title="CRUD操作示例" class="easyui-datagrid" style="width:700px;height:250px"
url="data.json"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="itemid" width="50">ID</th>
<th field="productid" width="50">产品ID</th>
<th field="listprice" width="50" align="right">价格</th>
<th field="unitcost" width="50" align="right">成本</th>
<th field="attr1" width="150">属性</th>
<th field="status" width="60" align="center">状态</th>
</tr>
</thead>
</table>
我们可以创建一个工具栏，用于执行CRUD操作，在HTML文件中添加以下代码：
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除</a>
</div>
我们需要编写JavaScript代码来处理CRUD操作，在HTML文件中添加以下代码：
<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function newUser(){
$('#dg').datagrid('appendRow',{status:'P'});
var row = $('#dg').datagrid('getSelected');
if (row){
editIndex = $('#dg').datagrid('getEditor', {index:editIndex,field:'status'});
$('#dg').datagrid('selectRow', editIndex);
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'status'});
if (ed){
ed.target.focus();
}
} else {
editIndex = $('#dg').datagrid('appendRow',{status:'P'}).attr('id');
$('#dg').datagrid('selectRow', editIndex);
}
}
function editUser(){
if (editIndex == undefined){return false}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
} else {
return false;
}
}
function removeUser(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex);
var row = $('#dg').datagrid('getSelected');
if (row){
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
还没有评论，来说两句吧...