easyui实现crud实例

控制层代码

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结构

在这里插入图片描述

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, //每页默认10条
		    	pageList:[5,10,20,30,40,50], //可选择的每页显示多少条
		    	beforePageText: '当前页  ', //页面数字前的汉字提示
		    	afterPageText: ' 总 {pages}',  //总页数
		    	displayMsg:"当前{from} - {to} 条  共 {total} 条记录" , //当前1 - 10 条记录 共 21 条
		    });
	    });
	    
	    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>

控制层代码

dao层接口

application启动

实体类

结果返回类

resources结构

html页面

猜你喜欢