一、删除
1.查看是否选中了这一行
2.如果没有选中，给出提示（未选中）
3.如果选中，让用户确认是否删除
4.如果确认删除，直接访问后台进行删除
employee.js页面添加
//删除
delete(){
//1.查看是否选中了这一行
var row = employeeDataGrid.datagrid("getSelected");
//2.如果没有选中，给出提示(未选中)
if(!row){
$.messager.alert("提示","要休那个？小哥！","info");
return;
}
//3.如果选中,让用户确认是否删除
$.messager.confirm('确认','您要狠心干掉我嘛？',function(r){
if (r){
//4.如果确认删除,直接访问后台进行删除
$.get("/employee/delete",{id:row.id},function(result){
if(result.success){
//成功后刷新
employeeDataGrid.datagrid("reload");
}else{
//把失败信息做一个提示
$.messager.alert("提示",`搞错了! 原因是:${result.msg} ~~再来`,"error");
}
})
}
});
},
EmployeeController.java
/**
* 咱们以后写功能，很有可能是有前端人员的!
* 我们已经商量好了:{success:true,msg:xxxx}
*/
@RequestMapping("/delete")
@ResponseBody
public JsonResult delete(Long id){
try {
employeeService.delete(id);
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
return new JsonResult();
}
在工具包common中新建JsonResult表
/**
* 后台操作后返回的数据
*/
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 getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success= success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg= msg;
}
}
二、添加
1.点击添加 要弹出一个from表单 （在Easyui中找）
在employee.jsp中加入表单弹出框
确认密码。年龄验证。用户名是否占用
<%--表单弹出框--%>
<div id="employeeDialog" class="easyui-dialog" title="功能操作"
data-options="iconCls:'icon-save',closed:true,modal:true,buttons:'#formBtns'"
style="padding:10px">
<form id="employeeForm" method="post">
<input id="employeeId" type="hidden" name="id" />
<table cellpadding="5">
<tr>
<td>用户名:</td>
<td><input class="easyui-validatebox" type="text" name="username" data-options="required:true,validType:'checkName'"></input></td>
</tr>
<tr data-show="false">
<td>密码:</td>
<td><input id="password" class="easyui-validatebox" type="text" name="password" data-options="required:true"></input></td>
</tr>
<tr data-show="false">
<td>确认密码:</td>
<td><input class="easyui-validatebox" type="text" name="repassword" validType="equals['password','id']" data-options="required:true"></input></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-validatebox" type="text" name="age" data-options="required:true,validType:'integerRange[18,60]'"></input></td>
</tr>
<tr>
<td>归属地:</td>
<td>
<input name="department.id" class="easyui-combobox" panelHeight="auto" style="width:120px"
data-options="required:true,valueField:'id',textField:'name',url:'/util/deptList'" />
</td>
</tr>
</table>
</form>
</div>
<%--弹出框(表单)操作--%>
<div id="formBtns">
<a href="javascript:;" data-method="save" class="easyui-linkbutton c1">确~认</a>
<a href="javascript:;" onclick="$('#employeeDialog').dialog('close')" class="easyui-linkbutton c5">取~消</a>
</div>
employee.js中 function 添加一个控件获取
var employeeDialog =$("#employeeDialog");
add(){
//把所有带data-show的元素显示起来
$("*[data-show]").show();
$("*[data-show] input").validatebox("enable");
//打开对话框
employeeDialog.dialog("center").dialog("open");
//把form中的数据清空
employeeForm.form("clear");
},
添加_验证
head.jsp中引入Easyui的验证插件
<%--引入Easyui验证插件--%>
<link href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
<script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script>
用户是否被占用
在没有的情况下 我们需要自定义验证 首先在employee.js中
//Easyui的自定义验证
$.extend($.fn.validatebox.defaults.rules, {
//验证的名称
checkName: {
/**
* @param value 输入框中的值
* @param param 调用验证输入的参数(数组)
* @returns {boolean}
*/
validator: function(value, param){
//拿到相应的id
var empId = $("#employeeId").val();
//这里获取的是字符串
var result = $.ajax({
url: "/employee/checkName",
data:{username:value,id:empId},
async: false //同步请求
}).responseText;
//返回false代码验证失败,返回true代码通过验证
return result==="true";
},
//出错后的信息
message: '该用户名已经被大神使用!!!'
}
});
三、修改
employee.js也是要弹出并回显
var employeeForm =$("#employeeForm");
edit(){
var row = employeeDataGrid.datagrid("getSelected");
if(!row){
$.messager.alert("提示","要哪个！小哥！","info");
return;
}
//把所有带data-show的元素隐藏起来
$("*[data-show]").hide();
$("*[data-show] input").validatebox("disable");
//打开对话框
employeeDialog.dialog("center").dialog("open");
//把form中的数据清空
employeeForm.form("clear");
//咱们部门要的字段："department.id"
// row的部门部门: department.id
if(row.department){
row["department.id"] = row.department.id;
}
//完成修改的回显
employeeForm.form("load",row);
},
在employee.jsp中 先给一个id
<input id="employeeId" type="hidden" name="id" />
