关于easyui与后台的联动CRUD

关于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方法可以解决

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