zsgc zsgc zsgc

最新推荐文章于 2024-07-03 00:14:53 发布
Jiaojiao??
最新推荐文章于 2024-07-03 00:14:53 发布
阅读量126
点赞数
分类专栏：前端文章标签：其他
本文链接：https://blog.csdn.net/Jiao543/article/details/120874111
版权
前端专栏收录该内容
17 篇文章 0 订阅
订阅专栏
zsgc zsgc zsgc

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--固定框架-->
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
		<!--图标库-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<title></title>
	</head>
	<style type="text/css">
		.modal {
		    display: none; 
		}
		.modal-content {
		    background-color: #fefefe;
		    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
		    border: 1px solid #888;
		    width: 80%; /* Could be more or less, depending on screen size */
		}
		input[type=number],input[type=text]{
		    width: 100%;
		    padding: 12px 20px;
		    margin: 8px 0;
		    display: inline-block;
		    border: 1px solid #ccc;
		    box-sizing: border-box;
		}
		button {
		    background-color: #4CAF50;
		    color: white;
		    padding: 14px 20px;
		    margin: 8px 0;
		    border: none;
		    cursor: pointer;
		    width: 100%;
		}
		th{
			text-align:center;
		}
	</style>
	
	<body>
		<div>
			<button id="addadd" style="width:auto;">添加</button>
			<button type="submit" id="sxbutton" style="width:auto;">刷新</button>
		<div>
			<table class="table table-bordered" id="append" style="border:1px solid #000000;">
				<th hidden="hidden">id</th>
				<th>id</th>
				<th>content</th>
				<th>userid</th>
				<th>realname</th>
				<th>createtime</th>
				<th>updatetime</th>
				<th>currentuserid</th>
				<th colspan="2">操作</th>
				
			</table>
		</div>
	</body>
	<script type="text/javascript">
		
		// $(document).ready(function(){
		// 	biaoge();
		// 	addShuju();
		// 	bianjiShuju();
		// 	shuaxin();
		// 	delShuju();
		// });
		function biaoge(){
			//展示表格
			$.ajax({
				type:'post',
				url:'tnotice/list',
					contentType:'application/json',
					beforeSend:function(){
						$("#load").show();
					},
					success:function(response){	
						$("#load").hide();
						//方法中传入的参数data为后台获取的数据
						var index=0;
						for(i in response.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
						{
							index=index+1;
							// JSON.stringify()
						    var tr;
						    tr='<td hidden="hidden">'+JSON.stringify(response.data[i].id)+'</td>'+
							'<td>'+index+'</td>'+
							'<td>'+JSON.stringify(response.data[i].content).replaceAll('"','')+'</td>'+
							'<td>'+JSON.stringify(response.data[i].userid)+'</td>'+
							'<td>'+JSON.stringify(response.data[i].realname).replaceAll('"','')+'</td>'+
							'<td>'+JSON.stringify(response.data[i].createtime)+'</td>'+
							'<td>'+JSON.stringify(response.data[i].updatetime)+'</td>'+
							'<td>'+JSON.stringify(response.data[i].currentuserid)+'</td>'+
							'<td>'+'<button class="bianji btn btn-success" style="width:auto;">编辑</button>'+'</td>'+
							'<td>'+'<button class="shanchu btn btn-danger" style="width:auto;">删除</button>'+'</td>'
						    $("#append").append('<tr>'+tr+'</tr>')
							
						}
						return false
					},
					error:function(xhr){
					 	alert("失败");
						return false;
					},
					
				});
			
		}
		function addShuju(){
			//添加数据
			 $("#addadd").click(function(){
			    $("#id01").show();
			  });
			$("#addbutton").click(function(){
					var user={
						"content":$("#neirong").val(),
						"currentuserid":"1"
					};
				$.ajax({
					type:'post',
					url:'tnotice/add',
					pagination: true,
					contentType: "application/json; charset=utf-8",
					data : JSON.stringify(user),
					dataType : 'json',
					beforeSend:function(){
						$("#load").show();
					},
					success:function(response){	
						$("#load").hide();
						if(response.code == 200){
							alert("cg");
						}		
						if(response.code == 400){
							alert("错误！");
						}
					},
					error:function(xhr){
					 	alert("失败");
					}
				});
			});
		}
		function bianjiShuju(){
			//编辑数据
			$("table tbody").on("click",".bianji",function () {
				$('#id02').show();
				edit(this);
			})
			function edit(a){	
				$("#neirong2").val(a.parentNode.parentNode.childNodes[2].textContent)
				$("#addbutton2").click(function(){
					var user={
						"id":a.parentNode.parentNode.childNodes[0].textContent,
						"content":$("#neirong2").val(),
					};
					
					$.ajax({
						type:'post',
						url:'tnotice/update',
						pagination: true,
						contentType: "application/json; charset=utf-8",
						data : JSON.stringify(user),
						dataType : 'json',
						success:function(response){	
							if(response.code == 200){
								alert(response.msg);
							}		
							if(response.code == 400){
								alert(response.msg);
							}
						},
						error:function(xhr){
						 	alert("失败");
						}
					});
				});
				
				
			}
			
		}
		
		function shuaxin(){
			//刷新表格
			$("#sxbutton").click(function(){
				$.ajax({
					type:'post',
					url:'tnotice/list',
					contentType:'application/json',
					beforeSend:function(){
						$("#load").show();
					},
					success:function(response){	
						$("#load").hide();
						window.location.reload();
					},
					error:function(xhr){
					 	alert("失败");
					}
				});
			});
		}
		
		function delShuju(){
			//删除数据
			
			$("table tbody").on("click",".shanchu",function () {
				// alert("right");
				// window.open("https://www.baidu.com");
				del(this);
			})
			function del(a){
				var p={
					"id":a.parentNode.parentNode.childNodes[0].textContent
				};
				$.ajax({
					type:'post',
					url:'tnotice/delete',
					pagination: true,
					contentType: "application/json; charset=utf-8",
					data : JSON.stringify(p),
					dataType : 'json',
					success:function(response){	
						if(response.code == 200){
							// alert("cg")
							window.location.reload();
						}		
						if(response.code == 400){
							alert("错误！");
						}
					},
					error:function(xhr){
					 	alert("失败");
					}
				});
			}}
	</script>
</html>
<div id="id01" class="modal">
					  
	<form class="modal-content animate" >
		<span onclick="document.getElementById('id01').style.display='none'" 
			class="close" title="Close Modal">&times;</span>
		<div class="container">
					
		<label><b>content</b></label>
		<input type="text" placeholder="请输入内容" id="neirong" required>
						  
		<button type="submit" id="addbutton">确定</button>
	</form>
</div>
</div>
<div id="id02" class="modal">
					  
	<form class="modal-content animate" >
		<span onclick="document.getElementById('id02').style.display='none'" 
			class="close" title="Close Modal">&times;</span>
		<div class="container">
					
		<label><b>content</b></label>
		<input type="text" placeholder="请输入内容" id="neirong2" required>
<!-- 						  
		<label><b>userd</b></label>
		<select id="sele">
			<option value="0">可用</option>
			<option value="1">不可用</option>
		</select> -->
						  
		<button type="submit" id="addbutton2">确定</button>
	</form>
</div>