SSH结合EasyUI的分页操作（数据的增删改查）

最新推荐文章于 2020-07-08 14:16:34 发布

置顶

ColeSteve

最新推荐文章于 2020-07-08 14:16:34 发布

阅读量4.3k

点赞数 5

分类专栏：技术交流个人分享文章标签： easyui 前端 SSH分页-增删改

本文链接：https://blog.csdn.net/ColeSteve/article/details/52077589

版权

本文介绍了如何使用SSH框架结合EasyUI进行分页数据操作，包括前端和后端的代码分析。前端代码涉及页面展示和交互功能，如条件检索、行编辑和保存。后端主要通过PaginationAction和JSONParser类处理请求和响应。建议读者深入理解EasyUI文档以熟悉各个控件和属性。

摘要由CSDN通过智能技术生成

SSH结合EasyUI的分页操作（数据的增删改查）

一.效果展示图

如下：
用户列表
注：1.可以根据条件进行检索，结果直接显示在列表当中。
2.可以双击当前行，进入编辑模式，点击保存则修改确认，点击撤销则取消编辑。
3.点击添加，会在第一行新增编辑行，点击保存，会在列表的结尾新增一条记录。

二.前端代码分析

Body部分代码

 <body>
    <form name="searchform" method="post" action="" id="searchform">
        <td width="70" height="30">条件检索:</td>
        <td height="30"><input type="text" name="condition" size=20
            id="search_value"> <select name="value" id="search_type">
                <option value="-1">请选择搜索类型</option>
                <option value="name">按姓名搜索</option>
                <option value="address">按地址搜索</option>
        </select> <a id="submit_search">搜索</a></td>

    </form>
    <table id="mydatagrid">

        <thead>
            <tr>
    <!-- 下面的editor表示可编辑框的相关属性-->
                <th
                    data-options="field:'name',width:100,align:'center',editor: { type: 'text', options: { required: true } }">姓名</th>
                <th
                    data-options="field:'age',width:100,align:'center',sortable:true,editor: { type: 'text', options: { required: true } }"
                    onclick="sort()">年龄</th>
                <th
                    data-options="field:'address',width:100,align:'center',editor: { type: 'text', options: { required: true } }">地址</th>
                <th
                    data-options="field:'account',width:100,align:'center',editor: { type: 'text', options: { required: true } }">账户</th>
                <th
                    data-options="field:'password',width:100,align:'center',editor: { type: 'text', options: { required: true } }">密码</th>

                <th
                    data-options="field:'email',width:100,align:'center',editor: { type: 'text', options: { required: true } }">邮箱</th>
                <th
                    data-options="field:'company',width:100,align:'center',editor: { type: 'text', options: { required: true } }">单位</th>

            </tr>
        </thead>

    </table>
</body>