Day3 增删改

一.删除功能

1.拿到要删除的是哪条数据(没有选择，给出提示)
2.如果有选择,给出确定选择(真的要删除嘛)
3.传id到后台进行删除 
    删除成功 -> 刷新页面
    删除失败 -> 给出提示
后台回了一个：JsonResult(boolean success,String msg)

1.1 准备employee.jsp

<div id="tb" style="padding:5px;height:auto">
    <!-- 这部分是加上增删改的按键:现在没有功能，我们先不管它 -->
    <div style="margin-bottom:5px">
        <a href="#"  data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="#"  data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="#"  data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <!-- 这部门是查询的功能 -->
    <div>
        <form id="searchForm" action="/employee/download" method="post">
            用户名： <input name="username" class="easyui-textbox" style="width:80px;height:32px">
            邮件: <input name="email" class="easyui-textbox" style="width:80px;height:32px">
            部门 :
            <input  class="easyui-combobox" name="departmentId"
                    data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/departmentList'">
            <a href="#" data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a>
        </form>
    </div>
</div>

1.2 准备employee.js

var hx={
    //查询数据
    search:function () {
        //需要先引入 jquery.serializejson.js 才可以使用这个方法
        var params = searchForm.serializeJSON();
        employeeGrid.datagrid('load',params);
    },
    add:function () {
      //添加数据(弹出添加的模态框)
    },
    edit:function () {
       //修改数据(弹出修改的模态框)
    },
    del:function () {
       //删除数据
    }, 
    save:function () {
       //保存数据
    }
}

二 .删除功能

 		 //删除数据
		del:function () {
        //拿到选中的这条数据
        var row = employeeGrid.datagrid("getSelected");
        if(row){
            $.messager.confirm('确认框', '确定要狠心删除我么?', function(r){
                if (r){
                    //进行删除
                    $.get("/employee/delete",{id:row.id},function (result) {
                        if(result.success){
                            $('#employeeGrid').datagrid('reload');
                        }else{
                            //alert("删除失败");
                            $.messager.alert('提示信息','删除失败!，原因:'+result.msg,"error");
                        }
                    })
                }
            });
        }else{
            $.messager.alert('提示信息','请选择一行再进行删除!','info');
        }
    }

2.2 准备一个JsonResult

package com.hx.common;

public class JsonResult {
    private boolean success = true;
    private String msg;

    public JsonResult() {}

    public JsonResult(boolean success, String msg) {
        this.success = success;
        this.msg = msg;
    }

    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

2.3完成删除的Controller

 //创建一个JsonResult类 默认true
    @RequestMapping("/delete")
    @ResponseBody
    public JsonResult delete(Long id) {
        try {
            employeeService.delete(id);
            return new JsonResult();
        } catch (Exception e) {
            e.printStackTrace();
            //发生异常new一个JsonResult值为false 并且捕获异常
            return new JsonResult(false, "删除失败:" + e.getMessage());
        }
    }

三.添加功能

1 准备弹出框

• EditDialog -> form （居中,模态,form清空）

2 完成验证

• 自带验证(必填,邮件)

    <input class="easyui-validatebox" type="text" name="email"
       data-options="required:true,validType:'email'"></input>

• 扩展的js(数字,数字范围,密码判断)
• 引入验证的代码

<%--验证扩展的样式与js引入--%>
<link rel="stylesheet" type="text/css" href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css">
<script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script>

• 验证完成的代码

<input class="easyui-validatebox" type="text" name="age" 
data-options="validType:'integerRange[18,80]'"></input>

 <tr data-save="true">
    <td>密码:</td>
    <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true"></input></td>
</tr>
<tr data-save="true">
    <td>确认密码:</td>
    <td>
        <input class="easyui-validatebox" type="password" name="confirmPassword"
               validType="equals['password','id']"
               data-options="required:true"></input></td>
</tr>

• 自定义验证

//定义我们自己的规则(验证重复)
$.extend($.fn.validatebox.defaults.rules, {
    checkName: {
        //验证规则  value:表单中的值  params:规则中传过来的值(数组形式)
        validator: function(value, param){
            //拿到相应的id
            var employeeId = $("#employeeId").val();
            //使用同步的方式进行查询
            var isSuccess = $.util.requestAjaxBoolean('/employee/checkUsername',
                {id:employeeId,username:value});
            //使用同步的方式进行Ajax请求
           return isSuccess;
        },
        //验证失败的提示
        message: '用户名已经被占用!'
    }
});

三.修改功能

用户名验证传了id

后台获取id，根据id拿到对应用户，如果数据库的用户名称和传过来的名称相应，直接返回true,代表这个名字是可以用的

修改的时候没有密码

• 添加时显示密码,并且把它启用

//把所有带 data-save属性的元素显示起来
$("*[data-save]").show();
//把对应的元素启用
$("*[data-save] input").validatebox("enable")

• 修改时隐藏密码，并且把它禁用

 //把所有带 data-save属性的元素隐藏起来
$("*[data-save]").hide();
//对应的元素禁用(这个值就不会提交到后台)
$("*[data-save] input").validatebox("disable");

• 修改回显

// 关连对象回显需要做的操作
if(row.department){
    row["department.id"] = row.department.id;
}
//进行数据的回显(在清空后面)
employeeForm.form("load",row);

数据丢失(动态修改)

三种解决方案(隐藏域,SQL不修改,先到数据库查)

@ModelAttribute : 在路径访问这个方法的时候会先执行它

解决n-to-n的问题

添加:/employee/save 修改：/employee/update?cmd=update

    @ModelAttribute("editEmployee")
    public Employee beforeEdit(Long id,String cmd){
        //修改的时候才查询(只要有id会就进行一次查询,这是不对的)
        if(id!=null && "update".equals(cmd)) {
            Employee dbEmp = employeeService.findOne(id);
            //把要传过来的关联对象都清空，就可以解决n-to-n的问题
            dbEmp.setDepartment(null);
            return dbEmp;
        }
        return null;
    }
    
    //这里的ModelAttribute和上面的名称是对应上的
    @RequestMapping("/update")
    @ResponseBody
    public JsonResult update(@ModelAttribute("editEmployee")Employee employee){
        return saveOrUpdate(employee);
    }