easyui實現crud例項
阿新 • • 發佈：2018-12-11
控制層程式碼
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. 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">