bootstrapTable技术与layer弹框技术的发送Ajax异步的操作(仅页面代码)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<base href="<%=basePath %>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!- 需要导入所需要的样式 -!>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.table.css" />
<link rel="stylesheet" type="text/css" href="css/layer.css" />
</head>
<body>
<h1>用户管理</h1>
<!- 引用bootstrap 修饰的div 用于条件查询 批量删除-!>
<div class="alert alert-warning alert-dismissible" >
姓名 : <input id="sName" name="sName" type="text"/>
县区 : <input id="county" name="county" type="text"/>
<button type="button" class="btn btn-primary" onclick="showList();">查询</button>
<button type="button" class="btn btn-danger" onclick="batchDelete();">批量删除</button>
<a href="student/add" class="btn btn-success">添加</a>
</div>
<table id="tab" data-toggle="table" //声明成bootstrapTable样式所需要的代码
data-url="student/list" //从控制器那个方法中获取数据，记得所需要的方法要加@ResponseBody注解
class="table-striped"
data-method="post" data-content-type="application/x-www-form-urlencoded; charset=UTF-8" //用post的方式进行提交
data-show-header="true" data-show-columns="true" data-show-refresh="true" //分别是显示列头；内容下拉框；和刷新按钮；
data-show-toggle="true" data-show-pagination-switch="true" //分别显示切换试图；显示控制分页的开关；
data-pagination="true" data-side-pagination="server" data-page-size="5"//分别是显示分页；设置在哪里分页(server指服务器)；分页每页显示几条数据；
data-page-list="[5,10,25,50,100,ALL]"> //分页可供选择的数据
<!-表格头部- !>
<thead>
<tr>
//th标签里面的 data-field 是固定引入数据访问层 属性 的标签
// data-checkbox 是引入多选框的样式
// data-formatter 是引入一个函数，因为书写别扭，所以调用一个函数opformatter 在下面jquery中有详细用法，第一个用于图片，第二个用于操作按钮
<th data-checkbox="true"></th>
<th data-formatter="opimg">头像</th>
<th data-field="id">编号</th>
<th data-field="sName">姓名</th>
<th data-field="sSet">性别</th>
<th data-field="age">年龄</th>
<th data-field="county">县区</th>
<th data-field="address">住址</th>
<th data-field="classes">班级</th>
<th data-formatter="opformatter">操作</th>
</tr>
</thead>
</table>
<!- 导入js 其中bootstrap-table-zh-CN.js 用于变成页面字体翻译成中文-!>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
var $table = $("#tab");
/* function showList(){
$table.bootstrapTable("refresh",{
query:{
"sName" : $("#sName").val(),
"county": $("#county").val()
}
});
} */
<!-以上方法已注解,可以运行，用来封装查询条件，并且刷新页面，用于重载数据，“refresh”指刷新，这种方式点击上一页下一页不会有太理想的效果 因此看以下方法-!>
<!-设置查询参数:对于表格的刷新和上一页下一页都管用:只要表格重新加载数据都起作用，比以上方法使用更轻松 -!>
<!-调用点击(点击查询绑定的方法)方法-!>
$table.bootstrapTable({
queryParams:function(params){
params["sName"] =$("#sName").val();
params["county"]=$("#county").val();
return params;
}
});
function showList(){
$table.bootstrapTable("refresh");
}
<!-指以上data-formatter调用的函数，显示学生的头像,前提是数据库中有学生的图片路径，我这里是img这个属性，项目中必须在img文件夹中有相对应路径的图片-!>
function opimg(value,row,index){
return '<img style="width:30px;height:30px;" src="img/'+row.img+'">';
}
<!-指以上data-formatter调用的函数，添加一个删除和修改按钮-!>
function opformatter(value,row,index){
var str = '<a href="javascript:void(0)" onclick="deleteStu('+row.id+');"><span class="glyphicon glyphicon-remove"></span></a>';
str +=' <a href="student/edit/${stu.id}.shtml"><span class="glyphicon glyphicon-pencil"></span></a>';
return str;
}
<!-调用删除绑定的函数，同layer弹框一起使用，function()里面的index指某一行的id-!>
function deleteStu(id){
layer.confirm("确定要删除吗?",{btn:["确定","取消"]},function(index){
//ok 点击确定 发送一个异步请求
$.post("student/delete",{id:id},function(data){
//为了加载新数据页面，对页面进行刷新
$table.bootstrapTable("refresh");
//成功之后关闭弹框，点击取消直接会关闭
layer.close(index);
})
});
}
<!-调用批量删除调用的函数进行批量删除-!>
function batchDelete(){
//获取表格中的选中行,如果没有选中行,return， getSelections指获取选中行的方法
var selRows = $table.bootstrapTable("getSelections");
if(selRows.length==0){
return;
}
//设置参数格式 要的是{[ids:1],[ids:2],[ids:3]}这种格式，所以写以下给参数设置格式
var postData = "";
$.each(selRows,function(i){
postData += "ids="+this.id;
if(i<selRows.length-1){
postData +="&";
}
})
//发送ajax请求，进行删除 ，也是同layer弹框一起使用
layer.confirm("确定要删除这些数据吗?",{btn:["确定","取消"]},function(index){
$.post("student/batchDelete",postData ,function(){
//删除页面后，刷新表格
$table.bootstrapTable("refresh");
layer.close(index);
});
});
}
</script>
</body>
希望以上代码可以为大家了解bootstrapTable 有一个简单了解，可以帮助你！感谢你的收看
