easyui对账户的增删改查

EasyUI 是一个基于 jQuery 的 UI 库，可以快速地构建出美观的 web 应用程序。对于账户的增删改查功能，可以结合 EasyUI 提供的表格、表单、对话框等组件来实现。

以下是一个简单的账户管理示例：

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：

// 弹出新增账户对话框
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
// 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` 文件进行删除操作。