欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于easyui与后台的联动CRUD

程序员文章站 2022-07-04 18:49:20
...

关于easyui与后台的联动CRUD

江海三年客,乾坤百战场。谁能辞酩酊,淹卧剧清漳

书接上回,上一篇博客简单的介绍Spring jpa与前端联动以及分页与高级查询,今天来谈谈easyuI联动后台进行简单实现CRUD

首先先实现最简单的删除单个

remove

前端数据列表及工具栏

<div id="tb" style="padding:5px;height:auto">
   <div style="margin-bottom:5px">
       <a href="#" ck="save" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
       <a href="#" ck="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
       <a href="#" ck="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
   </div>
   <div>
       <form id="searchForm"  method="post">
       用户名: <input name="username" class="easyui-textbox" style="width:80px">
       邮箱: <input name="email" class="easyui-textbox" style="width:80px">
       部门:
       <input name="department" class="easyui-combobox" style="width:100px"
              url="/util/departmentlist"
              valueField="id" textField="name">
       <a  ck="search" class="easyui-linkbutton" iconCls="icon-search">Search</a>
       </form>
   </div>
</div>
<table id="employeeGrid"  class="easyui-datagrid" style="width:100%;"
      toolbar='#tb'
      data-options="url:'/employee/pagelist',pagination:true,fitColumns:true,singleSelect:true,fit:true  ">
   <thead>
   <tr>
       <th data-options="field:'headImage',width:100,formatter:formatImage">头像</th>
       <th data-options="field:'username',width:100">用户名</th>
       <th data-options="field:'password',width:100">密码</th>
       <th data-options="field:'email',width:100">邮箱</th>
       <th data-options="field:'age',width:100,align:'right'">年龄</th>
       <th data-options="field:'department',width:100,align:'right' ,formatter:formatdepartment">部门</th>
   </tr>
   </thead>
</table>

这里使用一个a标签将删除按钮设置一个自定义属性ck
并在js代码给删除按钮加入点击事件, 这里为了省事使用了js的动态添加调用

$("a[ck]").on("click", function () {
       var method = $(this).attr("ck")
       itsource[method]();
   })

删除方法

//删除当前选择的行
       remove: function () {
       //获取被选中的行
           var select = employeeGrid.datagrid("getSelected");
           if (select) {
               $.messager.confirm("提示", "确定删除吗", function (r) {
                   if (r) {
                   //发送删除请求
                       $.post('/employee/remove', {id: select.id}, function (json) {
                       //接收后台传入的参数
                           $.messager.alert('提示', json.msg, 'info');
                           //重新加载
                           employeeGrid.datagrid("reload");
                       })
                   }
               });
           } else {
               $.messager.alert('提示', '请先选择一条数据!', 'error');
           }//
          
       },

修改与添加方法类似使用一个弹窗表单

edit

将弹窗表单打开


edit: function () {
           var select = employeeGrid.datagrid("getSelected");
           if (select) {
               saveDialog.dialog('center').dialog('open');
               //将密码隐藏
               $("#password").hide();
               select['department.id'] = select.department
               savaForm.form("load", select)
           } else {
               $.messager.alert('提示', '请先选择一条数据!', 'error');
           }
       },
添加方法
save: function () {
           savaForm.form("clear")
           saveDialog.dialog('center').dialog('open');
       },

提交方法
添加与修改公用,有id就修改 没id就添加,在后台进行处理,注意过去的参数名称与后天要一致,如果有自定义对象字段可能报400错误解决

sub: function () {
           var params = savaForm.serializeObject();
          


           $.post('/employee/saveOrUpdate', params, function (json) {
               $.messager.alert('提示', json.msg, 'info');
               employeeGrid.datagrid("reload");
               saveDialog.dialog('close');
           })

       }

如果有自定义对象字段可能报400错误解决方案如下
通过在前台对象点id字段调用set方法可以解决

这样我们就非常简单的完成了增删改查