EasyUI可编辑表格(Editable DataGrid)关联数据库进行增删改查

最新推荐文章于 2025-07-08 14:12:09 发布

原创

最新推荐文章于 2025-07-08 14:12:09 发布 · 973 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid

本文介绍了如何使用EasyUI的可编辑表格(editable datagrid)与数据库进行交互，实现数据的增删改查功能。详细阐述了HTML页面、JS代码以及Controller接口方法的实现，并提供了相关注意事项和资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EasyUI 可编辑表格(editable datagrid) 关联数据库进行增删改查（实用）

废话不多说，先上图：
在这里插入图片描述
增加：增加一行数据
删除：删除选中的行
修改：

双击表格栏，然后点其他栏让它失去焦点自动调方法
修改后点击上方保存按钮

HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
    <script type="text/javascript" src="../configs/js/my_link.js"></script>
    <script type="text/javascript" src="../resource/util/util.js"></script>
    <script type="text/javascript" src="../resource/util/loadingDiv.js"></script>
    <script type="text/javascript" src="../configs/easyui1.6.6/plugins/jquery.edatagrid.js"></script>
    <link rel="stylesheet" type="text/css" href="../resource/css/dictionaries/dictionaries.css">
</head>
<body>
<script type="text/javascript" src="../resource/js/dictionaries/dictionaries.js"></script>

<div class="easyui-layout" fit="true">
    <div data-options="region:'center',split:true" border="false">
        <!--查询框和按钮-->
        <div id="toolbar">
            <form id="search-form" method="post">
                <table>
                    <tr>
                        <td>
                            <label for="dicCode">字典编码：</label>
                            <input class="easyui-textbox" type="text" id="dicCode" name="dicCode"/>