layui增改查jsp

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

增改查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>

layui增改查jsp相关推荐

python写接口测试代码_python写运单接口测试（增改查）完整代码
importrequestsimportjsonfrom urllib importparseclassHttpWayBillRquest:'''运单的增改查''' defaccess_token(s ...
java增删改查 jsp生成_jsp+servlet实现最简单的增删改查代码分享
话不多说,请看代码 package ceet.ac.cn.dao; import java.sql.Connection; import java.sql.PreparedStatement; imp ...
学生增删改查jsp完整源码
学生增删改查 `control` 1.AddStudentServlet.java 2.DeleteStudentServlet.java 3.exitServlet.java 4.LoginFilt ...
java添加删除用户信息泄露_java删除用户404错误！！神奇！增改查都没问题啊！！...
一.先把前后端http method统一改为post试下; 二.以下摘自spring官方文档,希望对你有帮助 HTTP method conversion A key principle of RES ...
myeclipse mysql 乱码_MyEclipse与mysql增改查现乱码解决方案绝对有效
设置MyEclipse文件编码.且跟mysql的连接编码一致 set names gbk; SET character_set_client='utf8';SET character_set_conn ...
python3 购物车增改查终极版~
还是先来条NLP再说,快没了,以后想抄还没有... 十一,没有挫败,只有回应讯息 "挫败"只是指出过去的做法得不到预期的效果,是给我们需要改变的信号. "挫败" ...
一个完整的增删改查模块（以我们的项目‘危化品库管理’模块为例）
父组件列表页面  <template><div><div class="right ...
Oracle+jsp+Servlet的员工表的简单增删改查
1.引入jar包 2.连接数据库(编写连接数据库工具类) JDBCUtils.java package com.demo.utils;import java.sql.Connection; impor ...
python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查（纯layui实现）...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
实现简单的增删改查（Asp.Net MVC+Layui）
实现简单的增删改查(Asp.Net MVC+Layui) 一.页面效果二.前期准备 1.新建项目 2. 在项目中新建文件夹(设置mvc的雏形) 3.连接数据库(SqlServer) JdbcUtil ...

layui增改查jsp

layui增改查jsp相关推荐

最新文章

热门文章