目录
- 一、BootStrap概述
- 二、BootStrap使用
- 1.起步
- 1.下载或放入BootStrap文件到本地工程里
- 2.在html代码中引入1个css文件和两个js文件
- 3.复制模板代码到本地html文件里会自动应用成bootStrap图样中的效果
- 0.实战案例-环境准备
- 0.实战案例-基本模板
- 2.布局容器
- 3.栅格系统
- 4.常用组件
- 表格
- 表单
- 三、案例实战
- 查询所有
- 页面展示
- 按钮展示与完成
- 数据删除
- 事件委托
- 获取按钮 - 绑定事件 - 拿到入参 - 发送删除请求
- 删完之后再清空和查询-即刷新
- 添加数据
- 逻辑流程
- 准备模态框
- 发送保存请求
- 后台添加完成
- 添加前端处理
- 数据修改
- 逻辑流程
- 前端
- 后端
一、BootStrap概述
jQuery本身不带样式，要自己设置，bootStrap有，可以直接看着选用，不用自己调来调去。相当于带有现成样式的前端组件库。
Bootstrap是最受欢迎的 HTML、CSS 和 JS 前端框架，用于开发响应式布局、移动设备优先的 WEB 项目
注意事项：
1.像百度、淘宝之类的大公司网页不使用响应式，而是独立开发一套手机页面
2.一般网站的交互很少，仅仅用于信息展示和获取以及点个赞什么的。需要写的兼容性代码很少，非常适合做成响应式
二、BootStrap使用
1.起步
1.下载或放入BootStrap文件到本地工程里
2.在html代码中引入1个css文件和两个js文件
中文网 - v3中文文档 - 起步 - 基本模板
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../docs-assets/js/html5shiv.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3.复制模板代码到本地html文件里会自动应用成bootStrap图样中的效果
全局CSS样式，组件，JS插件，
0.实战案例-环境准备
0.实战案例-基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link href="/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
2.布局容器
table布局 - 不满足复杂的布局情况
div布局 - 麻烦
bootStrap版容器布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link href="/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" "/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<style type="text/css">
.container{
background: red
}
.container-fluid{
background: green
}
</style>
</head>
<body>
<div class="container">两端留空白</div><br>
<div class="container-fluid">两端填充满</div>
</body>
</html>
3.栅格系统
原理和应用见html文档和word文档，可根据不同尺寸屏幕做适应。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link href="/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript""/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<style type="text/css">
div {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
</div>
</div>
</body>
</html>
4.常用组件
表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<!-- css样式 -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- 引入jquery 的js文件 -->
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<!-- 引入bootstrap 的js文件 要在jquery的js文件下面 -->
<script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body>
<div class="container"><!-- 留边 -->
<table class="table table-bordered table-hover"><!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>111</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr class="warning">
<td>111</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr class="danger">
<td>111</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr class="active">
<td>111</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<!-- css样式 -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- 引入jquery 的js文件 -->
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<!-- 引入bootstrap 的js文件 要在jquery的js文件下面 -->
<script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body>
<div class="container"><!-- 留边 -->
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
三、案例实战
查询所有
页面加载完成后直接发异步请求拿数据
将数据放入新增的标签中
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
console.debug(msg)
}
});
});
</script>
@RequestMapping("/findAll")
@ResponseBody
List<Emp> findAll(){
return service.findAll();
}
<select id="findAll" resultType="emp">
select * from emp
</select>
页面展示
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container"> <!-- 留边 -->
<table class="table table-bordered "> <!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
<th>卡号</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
//console.debug(msg)
$.each(msg,function(){ var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>操作</td></tr>";
$("#tb").append(tr);
});
}
});
});
</script>
</body>
</html>
按钮展示与完成
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container"> <!-- 留边 -->
<table class="table table-bordered "> <!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
<th>卡号</th>
<th>操作   
<button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus"></span> 添加</button>
</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
//console.debug(msg)
$.each(msg,function(){
// 准备按钮
var btn = "<button class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-trash'></span> 删除</button>  "+
"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span> 修改</button>";
// 准备一个tr
var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
// 把tr放入tbody中
$("#tb").append(tr);
});
}
});
});
</script>
</body>
</html>
数据删除
事件委托
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<!-- css样式 -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- 引入jquery 的js文件 -->
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<!-- 引入bootstrap 的js文件 要在jquery的js文件下面 -->
<script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body>
<input type="button" value="添加p元素" />
<p>111</p>
<p>222</p>
<p>333</p>
<script type="text/javascript">
$(function() {
$('input').click(function() {
$('body').append('<p>新添加的p元素</p>');
});
/* $('p').on('click', function() {
$(this).remove();
}); */
//与上面效果一样（如果不传选择器，就是普通的事件绑定，传了就是事件委托）
$('body').on('click', 'p', function() {
// 委托给祖先类 由p标签来做
$(this).remove();
});
});
</script>
</body>
</html>
获取按钮 - 绑定事件 - 拿到入参 - 发送删除请求
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 留边 -->
<table class="table table-bordered ">
<!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
<th>卡号</th>
<th>操作   
<button class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-plus"></span> 添加
</button>
</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
//console.debug(msg)
$.each(msg,function(){
// 准备按钮
var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span> 删除</button>  "+
"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span> 修改</button>";
// 准备一个tr
var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
// 把tr放入tbody中
$("#tb").append(tr);
});
}
});
});
// 删除，动态生成的元素，需要事件委托机制
$("tbody").on("click",".del",function(){
// 获取eid ->即请求入参
var eid = $(this).parent().parent().find("td:eq(0)").text();
// alert(eid)
// 发送删除请求
$.ajax({
type: "post",
url: "/emp/delById",
data:"eid="+eid,
success: function(msg){
console.debug(msg);
}
});
});
</script>
</body>
</html>
@RequestMapping("/delById")
@ResponseBody
public String delById(Integer eid){
try {
service.delById(eid);
return "ok";
} catch (Exception e) {
return e.getMessage();
}
}
<delete id="delById">
delete from emp where eid = #{eid}
</delete>
删完之后再清空和查询-即刷新
封装查询所有方法—查询所有前先清空
删除成功就查询所有—即刷新
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 留边 -->
<table class="table table-bordered ">
<!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
<th>卡号</th>
<th>操作   
<button class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-plus"></span> 添加
</button>
</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<script type="text/javascript">
//封装查询所有
function list(){
// 清空数据
$("#tb").empty();
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
//console.debug(msg)
$.each(msg,function(){
// 准备按钮
var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span> 删除</button>  "+
"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span> 修改</button>";
// 准备一个tr
var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
// 把tr放入tbody中
$("#tb").append(tr);
});
}
});
}
// 页面加载完发送查询所有的请求
$(function(){
list();
});
// 删除，动态生成的元素，需要事件委托机制
$("tbody").on("click",".del",function(){
// 获取eid ->即请求入参
var eid = $(this).parent().parent().find("td:eq(0)").text();
// alert(eid)
// 发送删除请求
$.ajax({
type: "post",
url: "/emp/delById",
data:"eid="+eid,
success: function(msg){
//console.debug(msg);
if(msg.indexOf("ok")!=-1){
// 查询所有，刷新
list();
}else{
alert("删除失败");
}
}
});
});
</script>
</body>
</html>
添加数据
逻辑流程
点击添加 - 出现模态框 - 填写表单 - 保存数据
准备模态框
<!-- 模态框 -->
<div id="saveModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">添加数据</h4>
</div>
<div class="modal-body">
<!-- 表单 -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="ename" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="ename" class="form-control" id="ename" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" id="sex1" value="男"> 男
</label>
<label class="checkbox-inline">
<input type="radio" name="sex" id="sex2" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="adress" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" name="adress" class="form-control" id="adress" placeholder="请输入地址">
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">电话</label>
<div class="col-sm-10">
<input type="text" name="tel" class="form-control" id="tel" placeholder="请输入电话">
</div>
</div>
<div class="form-group">
<label for="card" class="col-sm-2 control-label">card</label>
<div class="col-sm-10">
<input type="text" name="card" class="form-control" id="card" placeholder="请输入卡号">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
发送保存请求
// 添加
$(".add").click(function(){
// 清空模态框中的form表单 js的方法 reset()
$("form")[0].reset();
// 显示模态框
$("#saveModal").modal("show");
})
// 保存操作
$("#save").click(function(){
// 发送请求 保存操作
$.ajax({
type: "post",
url: "/emp/save",
data: $("form").serialize(), // 获取form中的数据
success: function(msg){
console.debug(msg);
}
});
});
后台添加完成
@RequestMapping("/save")
@ResponseBody
public String save(Emp emp){
try {
service.add(emp);
return "ok";
} catch (Exception e) {
return "no";
}
}
<insert id="add">
insert into emp (ename,sex,address,tel,card)
values(#{ename},#{sex},#{address},#{tel},#{card})
</insert>
添加前端处理
// 添加
$(".add").click(function(){
// 清空模态框中的form表单 js的方法 reset()
$("form")[0].reset();
// 显示模态框
$("#saveModal").modal("show");
})
// 保存操作
$("#save").click(function(){
// 发送请求 保存操作
$.ajax({
type: "post",
url: "/emp/save",
data: $("form").serialize(), // 获取form中的数据
success: function(msg){
if(msg.indexOf("ok")!=-1){
// 关闭模态框
$("#saveModal").modal("hide");
// 查询所有，刷新
list();
}else{
alert("保存失败");
}
}
});
});
完整JSP
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 留边 -->
<table class="table table-bordered ">
<!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
<th>卡号</th>
<th>操作   
<button class="add btn btn-success btn-sm">
<span class="glyphicon glyphicon-plus"></span> 添加
</button>
</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<!-- 模态框 -->
<div id="saveModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">添加数据</h4>
</div>
<div class="modal-body">
<!-- 表单 -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="ename" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="ename" class="form-control" id="ename" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" id="sex1" value="男"> 男
</label>
<label class="checkbox-inline">
<input type="radio" name="sex" id="sex2" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" name="address" class="form-control" id="address" placeholder="请输入地址">
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">电话</label>
<div class="col-sm-10">
<input type="text" name="tel" class="form-control" id="tel" placeholder="请输入电话">
</div>
</div>
<div class="form-group">
<label for="card" class="col-sm-2 control-label">card</label>
<div class="col-sm-10">
<input type="text" name="card" class="form-control" id="card" placeholder="请输入卡号">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="save" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
//封装查询所有
function list(){
// 清空数据
$("#tb").empty();
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
//console.debug(msg)
$.each(msg,function(){
// 准备按钮
var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span> 删除</button>  "+
"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span> 修改</button>";
// 准备一个tr
var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
// 把tr放入tbody中
$("#tb").append(tr);
});
}
});
}
// 页面加载完发送查询所有的请求
$(function(){
list();
});
// 删除，动态生成的元素，需要事件委托机制
$("tbody").on("click",".del",function(){
// 获取eid ->即请求入参
var eid = $(this).parent().parent().find("td:eq(0)").text();
// alert(eid)
// 发送删除请求
$.ajax({
type: "post",
url: "/emp/delById",
data:"eid="+eid,
success: function(msg){
//console.debug(msg);
if(msg.indexOf("ok")!=-1){
// 查询所有，刷新
list();
}else{
alert("删除失败");
}
}
});
});
// 添加
$(".add").click(function(){
// 清空模态框中的form表单 js的方法 reset()
$("form")[0].reset();
// 显示模态框
$("#saveModal").modal("show");
})
// 保存操作
$("#save").click(function(){
// 发送请求 保存操作
$.ajax({
type: "post",
url: "/emp/save",
data: $("form").serialize(), // 获取form中的数据
success: function(msg){
if(msg.indexOf("ok")!=-1){
// 关闭模态框
$("#saveModal").modal("hide");
// 查询所有，刷新
list();
}else{
alert("保存失败");
}
}
});
});
</script>
</body>
</html>
数据修改
逻辑流程
点击修改绑定事件展示模态框，
回显数据(模态框添加eid隐藏域input框 单选框的值回显)，
修改，
发送修改请求，
拿到数据刷新，
添加里清空隐藏域id
前端
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 留边 -->
<table class="table table-bordered ">
<!-- 带边框的表格 -->
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
<th>卡号</th>
<th>操作   
<button class="add btn btn-success btn-sm">
<span class="glyphicon glyphicon-plus"></span> 添加
</button>
</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<!-- 模态框 -->
<div id="saveModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">添加或修改数据</h4>
</div>
<div class="modal-body">
<!-- 表单 -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="ename" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="ename" class="form-control" id="ename" placeholder="请输入姓名">
<input type="hidden" name="eid" id="eid" />
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" id="sex1" value="男"> 男
</label>
<label class="checkbox-inline">
<input type="radio" name="sex" id="sex2" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" name="address" class="form-control" id="address" placeholder="请输入地址">
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">电话</label>
<div class="col-sm-10">
<input type="text" name="tel" class="form-control" id="tel" placeholder="请输入电话">
</div>
</div>
<div class="form-group">
<label for="card" class="col-sm-2 control-label">card</label>
<div class="col-sm-10">
<input type="text" name="card" class="form-control" id="card" placeholder="请输入卡号">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="save" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
//封装查询所有
function list(){
// 清空数据
$("#tb").empty();
$.ajax({
type:"post",
url:"/emp/findAll",
success:function(msg){
//console.debug(msg)
$.each(msg,function(){
// 准备按钮
var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span> 删除</button>  "+
"<button class='btn btn-primary btn-sm update'><span class='glyphicon glyphicon-wrench'></span> 修改</button>";
// 准备一个tr
var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
// 把tr放入tbody中
$("#tb").append(tr);
});
}
});
}
// 页面加载完发送查询所有的请求
$(function(){
list();
});
// 删除，动态生成的元素，需要事件委托机制
$("tbody").on("click",".del",function(){
// 获取eid ->即请求入参
var eid = $(this).parent().parent().find("td:eq(0)").text();
// alert(eid)
// 发送删除请求
$.ajax({
type: "post",
url: "/emp/delById",
data:"eid="+eid,
success: function(msg){
//console.debug(msg);
if(msg.indexOf("ok")!=-1){
// 查询所有，刷新
list();
}else{
alert("删除失败");
}
}
});
});
// 添加
$(".add").click(function(){
// 清空模态框中的form表单 js的方法 reset()
$("form")[0].reset();
// 清空隐藏域的eid
$("#eid").val("");
// 显示模态框
$("#saveModal").modal("show");
})
// 修改
// 绑定点击事件 事件委托机制
$("tbody").on("click",".update",function(){
// 回显数据 --
// 获取数据
// 获取id
var eid = $(this).parent().parent().find("td:eq(0)").text();
var ename = $(this).parent().parent().find("td:eq(1)").text();// 姓名
var sex = $(this).parent().parent().find("td:eq(2)").text(); // 性别
var address = $(this).parent().parent().find("td:eq(3)").text();// 地址
var tel = $(this).parent().parent().find("td:eq(4)").text();// 电话
var card = $(this).parent().parent().find("td:eq(5)").text(); //卡号
// 把数据放入form中数据回显
$("#ename").val(ename);
$("#sex1,#sex2").val([sex]); // 也可判断后分别赋值
$("#address").val(address);
$("#tel").val(tel);
$("#card").val(card);
$("#eid").val(eid);
// 模态框展示
$("#saveModal").modal("show");
})
// 保存操作 添加与修改都走这里
$("#save").click(function(){
// 发送请求 保存操作
$.ajax({
type: "post",
url: "/emp/save",
data: $("form").serialize(), // 获取form中的数据
success: function(msg){
if(msg.indexOf("ok")!=-1){
// 关闭模态框
$("#saveModal").modal("hide");
// 查询所有，刷新
list();
}else{
alert("保存失败");
}
}
});
});
</script>
</body>
</html>
后端
@RequestMapping("/save")
@ResponseBody
public String save(Emp emp){
try {
if (emp.getEid()==null) {
service.add(emp);
}else{
service.update(emp);
}
return "ok";
} catch (Exception e) {
return "no";
}
}
<update id="update">
update emp set ename=#{ename},sex=#{sex},address=#{address},tel=#{tel},card=#{card}
where eid=#{eid}
</update>
