控制层代码
package cn.ps.controll;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
import cn.ps.dao.EmpDao;
import cn.ps.entity.Emp;
import cn.ps.entity.Result;
@RestController
public class EmpControll {
@Autowired
private EmpDao eDao;
@GetMapping("/queryEmp")
public Result<Emp> query(String ename,int page,int rows){
ename=ename==null? "":ename;
PageRequest pr=new PageRequest(page-1, rows);
Page<Emp> pages=eDao.findByEnameLike("%"+ename+"%", pr);
Result<Emp> result=new Result<Emp>();
result.setRows(pages.getContent());
result.setTotal((int)pages.getTotalElements());
return result;
}
@DeleteMapping("/delEmp")
public Result del(String empno){
Result result=new Result();
try {
String [] array=empno.split(",");
for (String str : array) {
eDao.delete(str);
}
} catch (Exception e) {
result.setCode(1);
result.setMsg("删除失败"+e.getMessage());
}
return result;
}
@PostMapping("/addEmp")
public Result add(Emp emp){
Result result=new Result();
System.out.println(emp.toString());
try {
eDao.save(emp);
} catch (Exception e) {
result.setCode(1);
result.setMsg("操作失败"+e.getMessage());
}
return result;
}
}
dao层接口
package cn.ps.dao;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.repository.CrudRepository;
import cn.ps.entity.Emp;
public interface EmpDao extends CrudRepository<Emp, String>{
Page<Emp> findByEnameLike(String ename,Pageable pag);
}
application启动
package cn.ps;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class,args);
}
}
实体类
package cn.ps.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import lombok.Data;
@Data
@Entity
public class Emp {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private String empno;
private String ename;
private String deptno;
@Column
private String hiredate;
@Column
private String sal;
@Column
private String job;
}
结果返回类
package cn.ps.entity;
import java.util.List;
import lombok.Data;
@Data
public class Result<E> {
private int total;
private List<E> rows;
private int code;
private String msg;
}
resources结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7d05cb3f2e809789f7a799e79e041b69.png)
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工信息管理系统</title>
<style type="text/css">
.ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem {
margin-bottom: 10px;
}
.fitem label {
display: inline-block;
text-align: right;
width: 80px;
font-size: 13px;
padding-right: 10px;
}
.fitem input {
width: 160px;
}
</style>
<link rel="stylesheet" type="text/css" href="resource/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resource/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resource/demo/demo.css">
<script type="text/javascript" src="resource/jquery.min.js"></script>
<script type="text/javascript" src="resource/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#mytable').datagrid({
url:'queryEmp',
method:'get',
title:'雇员信息表',
pagination:true,
rownumbers:true,
striped:true,
autoSave:true,
toolbar: [{
iconCls: 'icon-add',
text:"新增",
handler: function(){
$("#fm").form('clear');
$('#win').dialog('open',{
title: "新增雇员",
iconCls: 'icon-add',
modal: true
});
}
},'-',{
iconCls: 'icon-edit',
text:"修改",
handler: function(){
var selectedRow=$("#mytable").datagrid("getSelected");
if(selectedRow){
$("#fm").form('load',selectedRow);
$('#win').dialog("open",{
title: "修改雇员",
iconCls: 'icon-edit',
modal: true
});
$("#empnohide").attr("style","display:block");
}else{
$.messager.show({
title:'提示',
msg:"请选择要修改的数据!",
timeout:1500,
showType:'fade',
style:{
align:'center'
}
});
}
}
},'-',{
iconCls: 'icon-delete',
text:"删除",
handler: function(){
var arr=$('#mytable').datagrid("getSelections");
if(!arr.length){return alert("请选择要删除的数据");}
$.messager.confirm('确认','您确定想要删除该记录吗?',function(r){
if (r){
var colsno="";
$.each(arr,function(n,value){
colsno=colsno+value.empno+",";
})
colsno= (colsno ? colsno.substring(0,colsno.length-1):"");
$.ajax({
type:'post',
data:{
_method:"delete",
empno:colsno
},
url:"delEmp",
success:function(result){
if(result.code==1){
$.messager.show({
title:'删除状态',
msg:result.msg,
timeout:1500,
showType:'fade',
style:{
align:'center'
}
});
}else{
$.messager.show({
title:'删除状态',
msg:'删除成功,消息将在1秒后关闭!',
timeout:1000,
showType:'fade',
style:{
align:'center'
}
});
$('#win').window("close");
$('#mytable').datagrid('reload');
}
}
})
}
});
}
},'-',{
iconCls: 'icon-reload',
text:"刷新",
handler: function(){
$('#mytable').datagrid('reload');
}
},'-',{
iconCls: 'icon-search',
text:"查询",
handler: function(){
$('#mytable').datagrid('load', {
ename: $("#ename").val()
});
}
},'-',{
text:"<input class='easyui-searchbox' id='ename' placeholder='请输入员工部分姓名或全名' />"
}],
columns:[[
{field:'ss',checkbox:true},
{field:'empno',title:'员工编号',width:'16%',sortable:true},
{field:'ename',title:'姓名', width:'16%'},
{field:'job',title:'职位',align:'center', width:'16%'},
{field:'sal',title:'薪水',align:'center',width:'16%'},
{field:'hiredate',title:'入职日期',width:'16%'},
{field:'deptno',title:'部门编号',width:'10%'}
]]
});
var p=$('#mytable').datagrid("getPager");
$(p).pagination({
pageSize:10,
pageList:[5,10,20,30,40,50],
beforePageText: '当前页 ',
afterPageText: ' 总 {pages}',
displayMsg:"当前{from} - {to} 条 共 {total} 条记录" ,
});
});
function Modify(){
$("#empnohide").attr("style","display:none");
$('#fm').form('submit',{
url:'addEmp',
success:function(r){
r=JSON.parse(r);
if(r.code==1){
$.messager.show({
title:'状态',
msg:r.msg,
timeout:1000,
showType:'fade',
style:{
align:'center'
}
});
}else{
$.messager.show({
title:'状态',
msg:'操作成功,消息将在1秒后关闭!',
timeout:1000,
showType:'fade',
style:{
align:'center'
}
});
$('#win').window("close");
$('#mytable').datagrid('reload');
}
}
});
}
function clos(){
$("#empnohide").attr("style","display:none");
javascript:$('#win').dialog('close');
}
</script>
</head>
<body>
<table id="mytable"> </table>
<div id="win" class="easyui-dialog" title="新增雇员" style="width: 400px; padding: 10px 20px;"
closed="true" buttons="#dlg-buttons"> <!-- 弹出框包括2部分一部分是上面的文本还有一部分是下面的两个按钮 -->
<form id="fm" method="post" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem" id="empnohide" style="display:none" >
<label>员工编号:</label>
<input name="empno" class="easyui-textbox" readonly/>
</div>
<div class="fitem">
<label>姓名:</label>
<input name="ename" class="easyui-textbox" />
</div>
<div class="fitem">
<label>职位:</label>
<input name="job" class="easyui-textbox" />
</div>
<div class="fitem">
<label>薪水:</label>
<input name="sal" class="easyui-textbox" />
</div>
<div class="fitem">
<label>入职时间:</label>
<input name="hiredate" class="easyui-date" />
</div>
<div class="fitem">
<label>部门编号:</label>
<input name="deptno" class="easyui-textbox" />
</div>
<!-- 直接写提交取消的事件不需要在js中绑定 -->
<div id="dlg-buttons" style="display: block">
<a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="Modify()" style="width: 90px">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="clos()" style="width: 90px">取消</a>
</div>
</form>
</div>
</body>
</html>