EasyUI 是一个基于 jQuery 的 UI 库，可以快速地构建出美观的 web 应用程序。对于账户的
增删改查功能，可以结合
EasyUI 提供的表格、表单、对话框等组件来实现。
以下是一个简单的账户管理示例：
HTML：
```html
<!-- 显示账户列表的表格 -->
<table id="accountTable" class="
easyui-
datagrid" style="width:100%;height:400px"
url="getAccounts.php" toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="50" sortable="true">ID</th>
<th field="name" width="100" sortable="true">姓名</th>
<th field="email" width="150" sortable="true">邮箱</th>
<th field="phone" width="100" sortable="true">电话</th>
</tr>
</thead>
</table>
<!-- 工具栏，包含新增、编辑、删除按钮 -->
<div id="toolbar">
<a href="#" class="
easyui-linkbutton" iconCls="icon-add" plain="true"
onclick="newAccount()">新增</a>
<a href="#" class="
easyui-linkbutton" iconCls="icon-edit" plain="true"
onclick="editAccount()">编辑</a>
<a href="#" class="
easyui-linkbutton" iconCls="icon-remove" plain="true"
onclick="destroyAccount()">删除</a>
</div>
<!-- 新增/编辑账户的对话框 -->
<div id="dlg" class="
easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">账户信息</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>姓名:</label>
<input name="name" class="
easyui-textbox" required="true">
</div>
<div class="fitem">
<label>邮箱:</label>
<input name="email" class="
easyui-textbox" validType="email">
</div>
<div class="fitem">
<label>电话:</label>
<input name="phone" class="
easyui-textbox">
</div>
</form>
</div>
<!-- 对话框底部的按钮 -->
<div id="dlg-buttons">
<a href="#" class="
easyui-linkbutton" iconCls="icon-ok" onclick="saveAccount()"
style="width:90px">保存</a>
<a href="#" class="
easyui-linkbutton" iconCls="icon-cancel"
onclick="$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
```
JavaScript：
```javascript
// 弹出新增账户对话框
function newAccount() {
$('#dlg').dialog('open').dialog('setTitle', '新增账户');
$('#fm').form('clear');
}
// 弹出编辑账户对话框
function editAccount() {
var row = $('#accountTable').
datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '编辑账户');
$('#fm').form('load', row);
}
}
// 保存新增/编辑的账户信息
function saveAccount() {
$('#fm').form('submit', {
url: 'saveAccount.php',
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg').dialog('close'); // 关闭对话框
$('#accountTable').
datagrid('reload'); // 刷新表格
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
// 删除选
中的账户
function destroyAccount() {
var row = $('#accountTable').
datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm', '确定要删除此账户吗?', function (r) {
if (r) {
$.post('destroyAccount.php', {id: row.id}, function (result) {
if (result.success) {
$('#accountTable').
datagrid('reload'); // 刷新表格
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}, '
json');
}
});
}
}
```
PHP：
```php
<?php
// getAccounts.php：获取账户列表
require_once('dbconfig.php');
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if (!$conn) {
die('连接数据库失败：' . mysqli_connect_error());
}
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page - 1) * $rows;
$result = array();
$result['total'] = mysqli_num_rows(mysqli_query($conn, "SELECT * FROM accounts"));
$sql = "SELECT * FROM accounts LIMIT $offset,$rows";
$rs = mysqli_query($conn, $sql);
$rows = array();
while ($row = mysqli_fetch_assoc($rs)) {
$rows[] = $row;
}
$result['rows'] = $rows;
mysqli_close($conn);
echo
json_encode($result);
?>
<?php
// saveAccount.php：保存新增/编辑的账户信息
require_once('dbconfig.php');
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if (!$conn) {
die('连接数据库失败：' . mysqli_connect_error());
}
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
$name = isset($_POST['name']) ? mysqli_real_escape_string($conn, $_POST['name']) : '';
$email = isset($_POST['email']) ? mysqli_real_escape_string($conn, $_POST['email']) : '';
$phone = isset($_POST['phone']) ? mysqli_real_escape_string($conn, $_POST['phone']) : '';
if ($id > 0) {
$sql = "UPDATE accounts SET name='$name',email='$email',phone='$phone' WHERE id=$id";
} else {
$sql = "INSERT INTO accounts(name,email,phone) VALUES ('$name','$email','$phone')";
}
if (mysqli_query($conn, $sql)) {
$result = array('success' => true);
} else {
$result = array('success' => false, 'msg' => '保存失败：' . mysqli_error($conn));
}
mysqli_close($conn);
echo
json_encode($result);
?>
<?php
// destroyAccount.php：删除指定账户
require_once('dbconfig.php');
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if (!$conn) {
die('连接数据库失败：' . mysqli_connect_error());
}
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
if ($id > 0) {
$sql = "DELETE FROM accounts WHERE id=$id";
if (mysqli_query($conn, $sql)) {
$result = array('success' => true);
} else {
$result = array('success' => false, 'msg' => '删除失败：' . mysqli_error($conn));
}
} else {
$result = array('success' => false, 'msg' => '无效的账户ID');
}
mysqli_close($conn);
echo
json_encode($result);
?>
```
这个示例
中，使用了
EasyUI 提供的 `
datagrid` 组件来显示账户列表，通过 `url` 属性指定了获取数据的 PHP 文件。在工具栏
中，添加了新增、编辑和删除按钮，分别对应三个 JavaScript 函数 `newAccount()`、`editAccount()` 和 `destroyAccount()`。新增和编辑时，会弹出一个对话框，使用 `form` 组件来输入账户信息，并通过 `submit` 方法提交表单数据到 `saveAccount.php` 文件进行保存。其
中，提交表单数据时，使用了 `onSubmit` 属性来验证表单数据的有效性，`success` 回调函数
中判断保存结果是否成功，并刷新账户列表。删除时，会弹出一个确认框，确认删除后，通过 `post` 方法将账户 ID 提交到 `destroyAccount.php` 文件进行删除操作。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1173
