easyui简单实现增删查改功能

后台代码只有控制层(controller),逻辑层(dao),实体类(entiey),再加个main方法运行就ok了
在这里插入图片描述

控制层 EmpController .java

package cn.ps.controller;

import javax.validation.Valid;

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.Empattr;
import cn.ps.entity.Result;

@RestController
public class EmpController {

	@Autowired
	private EmpDao empDao;
	
	@GetMapping("/queryEmp")
	public Result<Empattr> queryEmp(String ename,Integer page,Integer rows){
		if(ename==null) {
			ename="";
		}
		PageRequest pageRequest=new PageRequest(page-1,rows);
		Page<Empattr>findAll=empDao.findByEnameLike("%"+ename+"%",pageRequest);
		
		Result<Empattr> result=new Result<>();
		result.setTotal((int)findAll.getTotalElements());
		result.setRows(findAll.getContent());
		return result;
	}
	
	@DeleteMapping("empattr/{empno}")
	public Result deleteEmp(@PathVariable("empno") String empno){
		Result result=new Result();
		try {
			empDao.delete(empno);
		} catch (Exception e) {
			e.printStackTrace();
			result.setCode(1);
			result.setMsg("删除失败"+e);
		}
		return result;
	}
	
	@PostMapping("/empattr")
	public Result addEmp(Empattr empattr){
		Result result=new Result();
		try {
			empDao.save(empattr);
		} catch (Exception e) {
			e.printStackTrace();
			result.setCode(1);
			result.setMsg("新增失败"+e);
		}
		return result;
	}
	
	@PutMapping("empattr/{empno}")
	public Result updateEmp(@PathVariable String empno ,@Valid Empattr empattr){
		Result result=new Result();
		try {
			empattr.setEmpno(empno);
			empDao.save(empattr);
		} catch (Exception e) {
			e.printStackTrace();
			result.setCode(1);
			result.setMsg("修改失败"+e);
		}
		return result;
	}
}

逻辑层 EmpDao .java 用来查询分页

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.Empattr;

public interface EmpDao  extends CrudRepository<Empattr, String>{

	Page<Empattr> findByEnameLike(String ename,Pageable page);
}

实体类(属性类) Empattr .java

package cn.ps.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

//获取数据库表数据
@Entity
public class Empattr {
	//主键
	@Id()
	//自增长
	@GeneratedValue(strategy = GenerationType.AUTO)
	private String empno;
	//列头
	@Column
	private String ename;
	@Column
	private String sal;
	@Column
	private String job;
	@Column
	private String email;
	@Column
	private String phone;
	public String getEmpno() {
		return empno;
	}
	public void setEmpno(String empno) {
		this.empno = empno;
	}
	public String getEname() {
		return ename;
	}
	public void setEname(String ename) {
		this.ename = ename;
	}
	public String getSal() {
		return sal;
	}
	public void setSal(String sal) {
		this.sal = sal;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	@Override
	public String toString() {
		return "EmpAttr [empno=" + empno + ", ename=" + ename + ", sal=" + sal + ", job=" + job + ", email=" + email
				+ ", phone=" + phone + "]";
	}
	
	
}

Result.java 提示消息和返回总数

package cn.ps.entity;


import java.util.List;


public class Result<T> {
    private  int code;
    private String msg;
    private int total;
    private List<T> rows;
	public void setRows(List<T> rows) {
		this.rows = rows;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	
	public List<T> getRows() {
		return rows;
	}
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}

    
}

`
运行方法EasyuiMain.main

package cn.ps;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class EasyuiMain {

	public static void main(String[] args) {
		
		SpringApplication.run(EasyuiMain.class, args);
	}

}

html代码qeasy.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>职员信息</title>
	<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.css"> 
	<script type="text/javascript" src="./resource/jquery.min.js"></script>
	<script type="text/javascript" src="./resource/jquery.easyui.min.js"></script>
	<script >
		$(function(){
			//查询赋值
			var hide=0;
			$('#mytable').datagrid({    
			    url:'queryEmp', 
			    method:'get',
			    title:"员工信息",
			    pagination:true,
			    singleSelect:true,
			    rownumbers:true,
			    toolbar:[{
			    	//图标
			    	iconCls: 'icon-add',
			    	text:'新增',
			    	handler:function(){
			    		//点击图标显示easyui-window隐藏的表单 
			    		$("#addForm").window('open');
		    			
			    	}
			    },'_',{
			    	//图标
			    	iconCls:'icon-remove',
			    	text:'删除',
			    	handler:function(){
			    		//获取表中所选中的行所有参数 
			    		var selectObj=$('#mytable').datagrid("getSelected");
			    		
			    		$.ajax({
			    			//请求方式 
			    			type:'post',
			    			//指向地址  
			    			url:'empattr/'+selectObj.empno,
			    			data:{
			    				"_method":'delete'
			    			},
			    			success:function(r){
			    				if(r.code==0){
			    					$.messager.alert('消息','删除成功'); 
			    					$('#mytable').datagrid('load',{
			    					});
			    				}else{
			    					$.messager.alert('消息','删除失败'); 
			    				}
			    			}
			    		})
			    	}
			    },'_',{
			    	//图标 
			    	iconCls: 'icon-search',
			    	text:'查询',
			    	handler:function(){
			    		//定义一个变量 
			    		if(hide!=0){
							//隐藏查询框
							$('#mytable').next().hide(); 
							hide = 0;
						}else{
							//显示查询框
							$('#mytable').next().show(); 
							$('#mytable').textbox({  
								width:300,
							    buttonText:'查询', 
							    //图标 
							    iconCls:'icon-search',
							    //向左对齐 
							    iconAlign:'left',
							    prompt:'请输入姓名',
							    //点击事件
							   	onClickButton : function(){
							   		//获取选中对象 
							   		$('#mytable').datagrid('load', {  
							   			//查询的名字
							   			ename: this.value
							   		});
							   	}
							})
							hide = 1;
						}
		    			
			    	}
			    },'_',{
			    	//图标 
			    	iconCls:'icon-edit',
			    	text:'修改',
			    	handler:function(){
			    		//获取表中所选中的行所有参数 
			    		var selectObj=$('#mytable').datagrid("getSelected");
			    		//点击图标显示easyui-window隐藏的表单
			    		$("#updateForm").window('open');
			    		//获取选中对象 
			    		$("#myupdate").form('load',selectObj);
			    	}
			    }],
			    
			    columns:[[    
			        {field:'empno',width:'15%',title:"员工编号",sortOrder:true,checkbox:true},    
			        {field:'ename',width:'15%',title:"员工姓名"},    
			        {field:'sal',width:'15%',title:"员工薪水"},
			        {field:'job',width:'15%',title:"员工职位"},
			        {field:'email',width:'15%',title:"员工邮箱"},
			        {field:'phone',width:'15%',title:"电话号码"}
			    ]]    
			});
			
			//分页 
			var pg=$('#mytable').datagrid('getPager');
			$(pg).pagination({
				pageSize:10,//每页显示的记录条数 默认为10条
				pageList:[5,10,15,20],//可以设置每页记录条数的列表
				beforePageText:'第',//页数文本框显示的汉字 
				afterPageText:'页	共{pages} 页',
				displayMsg:'当前显示 {from} - {to} 条记录  共{total} 条记录 '
			});
			
			
		})
		//新增提交 
		  function submitForm(){
					//新增提交点击事件   
		   			$('#add').form('submit',{
		   				//type:'post', 
		   				//地址 
		    			url:'empattr',
		    			//提示消息 
		    			success:function(msg){
		    				//转换为JSON对象 
		    				msg=JSON.parse(msg);
		    				if(msg.code==0){
		    					$.messager.alert('消息','新增成功');
		    					//刷新页面 
		    					$('#mytable').datagrid('load',{
		    					});
		    					//关闭表单 
		    					$("#addForm").window('close');
		    				}else{
		    					$.messager.alert('消息','新增失败');
		    				}
		   				}
		    		})
		   		};
		   	//新增重置表单 
	   		function clearForm(){
	   			$('#add').form('clear');
	   		}
		   	
		   	
	   		//修改提交 
	   		function submitUpForm(){
	   			//获取表中所选中的行所有参数 
	   			var selectObj=$('#mytable').datagrid("getSelected");
	   			修改提交点击事件  
	   			$('#myupdate').form('submit',{
	   				
	   				//地址 
	    			url:'empattr/'+selectObj.empno,
	    			//提示消息 
	    			success:function(data){
	    				//转换为JSON对象 
	    				msg=JSON.parse(data);
	    				if(msg.code==0){
	    					$.messager.alert('消息','修改成功');
	    					//刷新页面 
	    					$('#mytable').datagrid('load',{
	    					});
	    					//关闭表单 
	    					$("#updateForm").window('close');
	    				}else{
	    					$.messager.alert('消息','修改失败');
	    				}
	   				}
	    		})
	   		};
   		function clearUpForm(){
   			$('#myupdate').form('clear');
   		}
   	 
   		
   

	</script>
</head>
<body>

	<h1>分页表格</h1>
	<table id="mytable">
		 
	</table>
	  <div id="addForm" class="easyui-window" title="增加员工信息" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;padding:5px;">
		<form id="add" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>员工姓名:</td>
	    			<td><input class="easyui-textbox" type="text" name="ename" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>员工薪水:</td>
	    			<td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>员工职位:</td>
	    			<td><input class="easyui-textbox" type="text" name="job" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>员工邮箱:</td>
	    			<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>电话号码:</td>
	    			<td><input class="easyui-textbox" type="text" name="phone" data-options="required:true"></input></td>
	    		</tr>
	    		
	    	</table>
	    </form>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">增加</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	    </div>
	</div>
	 
	 
	 <div id="updateForm" class="easyui-window" title="修改员工信息" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;padding:5px;">
		<form id="myupdate" method="post">
		<!-- 把post格式转化为put格式 -->
		<input type="hidden" name="_method" value="put">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>员工姓名:</td>
	    			<td><input class="easyui-textbox" type="text" name="ename" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>员工薪水:</td>
	    			<td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>员工职位:</td>
	    			<td><input class="easyui-textbox" type="text" name="job" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>员工邮箱:</td>
	    			<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>电话号码:</td>
	    			<td><input class="easyui-textbox" type="text" name="phone" data-options="required:true"></input></td>
	    		</tr>
	    		
	    	</table>
	    </form>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpForm()">保存</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearUpForm()">重置</a>
	    </div>
	</div>  
	
</body>
</html>

配置文件application.properties

server.port=8888
spring.datasource.url=jdbc:mysql://localhost/zuoye
spring.datasource.username=user1
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.show-sql=true

在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值