实现员工增删查改功能

最新推荐文章于 2024-03-26 21:44:29 发布

xiong451025

最新推荐文章于 2024-03-26 21:44:29 发布

阅读量991

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiong451025/article/details/83149759




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>磐石教育员工管理系统</title>
<link rel="stylesheet" type="text/css" href="my-grid.css"> 
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="my-grid.js" charset="utf-8"></script>

</head>
<body>
	<h1 style="text-align:center;">磐石教育员工管理系统</h1>
	
	<h4>部门信息</h4>
	<p>部门名称:<input id="deptName">
	<p>办公地址:<input id="loc">
	<p><button id="addDept">增加部门</button>
	<p>------------------------------------------
	<p>部门编号:<input id="deptnoU" readonly="readonly">
	<p>部门名称:<input id="deptNameU">
	<p>办公地址:<input id="locU">
	<p><button id="updateDept">修改部门</button>
	<table id="myGridTable" class="my-table"></table>
</body>
<script type="text/javascript">
	
	$("#addDept").click(function(){
		var deptName=$("#deptName").val();
		var loc=$("#loc").val();
		var dept={
				dname:deptName,
				loc:loc				
		}
		$.ajax({
			url:'http://localhost:8080/com.panshi.dept/dept.do?method=add', 
			type:'POST',
			data:dept,
			success:function(datas){
				var datas=JSON.parse(datas);
				if(datas.issuccess=true){
					alert("数据增加成功");
					findAllDeptInfos();
				}else{
					alert("数据增加失败");
				}
			}
		});
	});
	
	
	$("#updateDept").click(function(){
		var deptnoU=$("#deptnoU").val();
		var deptNameU=$("#deptNameU").val();
		var loc=$("#locU").val();
		var dept={
				dname:deptNameU,
				loc:loc,	
				deptno:deptnoU
		}
		$.ajax({
			url:'http://localhost:8080/com.panshi.dept/dept.do?method=update', 
			type:'POST',
			data:dept,
			success:function(datas){								
				alert("数据修改成功");
				findAllDeptInfos();
													
			}
		});
	});
	
	function findAllDeptInfos(){
		$.ajax({
			url:'http://localhost:8080/com.panshi.dept/dept.do?method=findAll',
			type:'GET',
			success:function(datas){
				initDeptGrid(datas);
			}
		});
	}
	
	findAllDeptInfos();
	
	function initDeptGrid(datas){
		var opt = {
			zebraCrossing : false,
			//数据源
			dataSource:datas,
			//多选
			multiple:false,
			//选择列是否显示
			selectColumn:false,
			width:'60%',
			//支持编辑
			edited:false,
			//表格列头
			columns:[
				{field:'deptno',title:'编号',edited:false},
				{field:'dname',title:'部门名称'},
				{field:'loc',title:'办公地址'},			
				{field:'option',title:'删除',edited:false,rendering:function(data,tr){
					var t=this;
					return "<button onclick='deleteDta(this)'>删除</button>";
				}}
			],
			events:{
				tdClick:function(td,value,rowData){					
					 $("#deptnoU").val(rowData.deptno);
					$("#deptNameU").val(rowData.dname);
					$("#locU").val(rowData.loc); 
				}
			}
		}
		var grid=$("#myGridTable").myGrid(opt);
	}
	
	function deleteDta($this){
		var tr=$($this).parents("tr.datagrid-row");
		
		var rowData=tr.data("row-data");
		var bool=confirm("你确定要删除\""+rowData.dname+"\"部门吗？");
		if(bool==false){
			return;
		}
		var deptno=rowData.deptno;
		
		tr.remove();
		
		deleteDeptInfoByNo(deptno);
	}
	
	function deleteDeptInfoByNo(no){
		$.ajax({
			url:'http://localhost:8080/com.panshi.dept/dept.do?method=delete&deptno='+no,
			type:'GET',
			success:function(datas){
				findAllDeptInfos();
			}
		});
	}
	
</script>
</html>