layui增改查jsp

最新推荐文章于 2023-12-26 11:18:33 发布

weixin_49231157

最新推荐文章于 2023-12-26 11:18:33 发布

阅读量320

点赞数

文章标签： java 后端

本文链接：https://blog.csdn.net/weixin_49231157/article/details/109249516

版权

下面展示一些 内联代码片。

增改查jsp

// An highlighted block
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
<body>
	<div>
		<form action="">
			姓名：<input type="text"  id="name">
			手机号：<input type="text" id="tele_number"> 
			日期:<input type="text" id="minborn_date">~<input type="text" id="maxborn_date">
			 <input type="button" value="检索" onclick="sel()">
			 <input type="button" value="添加" onclick="add()">
		</form>
	</div>
	<!--添加  -->
	
<div id="addstu" style="display: none;">
	
		<form action="">
			姓名：<input type="text"  id="sname"><br>
			手机：<input type="text" id="stele_number"> <br>
			地址：<input type="text" id="saddress"><br>
    		性别：男<input type="radio" name="sex" value="男"  checked=""/>女<input  type="radio" name="sex" value="女" /><br/>
			院系：<input type="text" id="sdepartment"><br>
			生日：<input type="text" id="sborn_date"><br>
			<input type="button" value="添加" onclick="addstudent()">
		</form>
	</div>
<!--添加结束  -->

	<!--详情 -->
	
<div id="stuid" style="display: none;">
	
		<form action="">
			姓名：<input type="text"  id="stname"><br>
			手机：<input type="text" id="number"> <br>
			地址：<input type="text" id="staddress"><br>
    		性别：<input type="text" id="sex"><br>
			院系：<input type="text" id="stdepartment"><br>
			生日：<input type="text" id="stborn_date"><br>
			
		</form>
	</div>
<!--详情结束  -->
<!--修改  -->
	
<div id="updatestu" style="display: none;">
	
		<form class="layui-form" lay-filter="fm">
		<input type="hidden" name ="student_id" id="stuId"/><br/>
			姓名：<input type="text" name ="student_name" id="stuName"/><br/>
			手机：<input type="text" name ="tele_number" id="stutele_number"> <br>
			地址：<input type="text" name ="address" id="stuaddress"><br>
   			性别：男<input type="radio" name="student_sex"  value="男"  checked=""/>女<input  type="radio" name="student_sex" value="女" /><br/>
			院系：<input type="text" name="department" id="studepartment"><br>
			生日：<input type="text" name ="born_date"  id="s_birthday"/><br/>
			<input type="button" value="修改" onclick="updatestudent()">
		</form>
	</div>
<!--修改结束  -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">详情</a>
</script>
	<table id="demo" lay-filter="test"></table>

<script>
var tableObj;
var updateIndex;
function sel() {
	layui.use(['table','laydate','form'], function(){
		  var table = layui.table;
		  var laydate = layui.laydate;
		  var form= layui.form;
  
  laydate.render({
	    elem: '#minborn_date'
	  });
  laydate.render({
	    elem: '#maxborn_date'
	  });
  laydate.render({
	    elem: '#sborn_date'
	  });
  laydate.render({
	    elem: '#s_birthday'
	  });
  //第一个实例
  tableObj=table.render({
    elem: '#demo'
    ,url: 'StudentServlet' //数据接口
    ,page: true //开启分页
    
  ,where:{
  	name:$("#name").val(),
  	tele_number:$("#tele_number").val(),
  	minborn_date:$("#minborn_date").val(),
  	maxborn_date:$("#maxborn_date").val()
  	
  }
    ,cols: [[ //表头
      {field: 'student_id', title: '学生ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'student_name', title: '学生姓名', width:80}
      ,{field: 'student_sex', title: '性别', width:80, sort: true}
      ,{field: 'born_date', title: '出生日期', width:80} 
      ,{field: 'department', title: '院系', width: 177}
      ,{field: 'class_no', title: '班级', width: 80, sort: true}
      ,{field: 'enroll_date', title: '入校时间', width: 80, sort: true}
      ,{field: 'tele_number', title: '电话', width: 80}
      ,{field: 'address', title: '家族地址', width: 135, sort: true}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
			//监听行工具事件
			  table.on('tool(test)', function(obj){
			    var data = obj.data;
			    //console.log(obj)
			    if(obj.event === 'del'){
			    	var id = data.student_id;
			    	$.post("StudentIdServlet",{
			    		stuid:id
			    	},function(res){
			    		$("#stname").val(res.student_name);
			    		$("#number").val(res.tele_number);
			    		$("#staddress").val(res.address);
			    		$("#sex").val(res.student_sex);
			    		$("#stdepartment").val(res.department);
			    		$("#stborn_date").val(res.born_date);
			    		
			    	},"json")
			    	 layer.open({
				    	 type:1,
				    	 content:$("#stuid"),
				    	 area:['300px','400px']
				     })
				    	
			    } else if(obj.event === 'edit'){
			    	form.val("fm",data)
			    	layer.open({
				    	 type:1,
				    	 content:$("#updatestu"),
				    	 area:['300px','400px']
				     })
			    }
			  });
});
}
//点击弹出添加窗体
var insretstu
function add() {
	insretstu=layer.open({
		  type: 1, 
		  content: $("#addstu"),
		 area:["300px","400px"]
		});
}
// 添加
function addstudent() {
	var name=$("#sname").val();
	var sex=$("input[name='sex']:checked").val();
	var birthday=$("#sborn_date").val();
	var phone=$("#stele_number").val();
	var address=$("#saddress").val();
	var department=$("#sdepartment").val();
	/*二次确认  */
	if (confirm("确认提交吗？")) {
		$.post("AddServlet",{
			name:name,
			student_sex:sex,
			born_date:birthday,
			department:department,
			tele_number:phone,
			address:address
		},function(res){
			if (res=="true") {
				layer.msg("添加成功");
				layer.close(insretstu);
				tableObj.reload();
			}
		})
		
	}
}

 // 点击修改

 function updatestudent(){
	 	var sname=$("#stuName").val();
		var ssex=$("input[name='student_sex']:checked").val();
		var sbirthday=$("#s_birthday").val();
		var sphone=$("#stutele_number").val();
		var saddress=$("#stuaddress").val();
		var sdepartment=$("#studepartment").val();
		var stuId=$("#stuId").val();
		if(confirm("确认提交吗")){
			$.post("UpdateServlet",{
				id:stuId,
				name:sname,
				student_sex:ssex,
				born_date:sbirthday,
				department:sdepartment,
				tele_number:sphone,
				address:saddress
				
			},function(res){
				if(res=="true"){
					layer.msg("修改成功");
					layer.close(updateIndex);
					tableObj.reload();
				}
			})
		}
	}
</script>
</body>
</html>