记录下 Bootstrap Table 的用法，备忘。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebDemo</title> <!--1. Jquery组件引用-->
<script type="text/javascript" src="../Content/jquery/jquery-3.3.1.min.js"></script> <!--2. bootstrap组件引用 -->
<script type="text/javascript" src="../Content/bootstrap/bootstrap.js"></script>
<link rel="stylesheet" href="../Content/bootstrap/bootstrap.css" /> <!--3. bootstrap table组件以及中文包的引用-->
<link rel="stylesheet" href="../Content/bootstrap/bootstrap-table.css">
<script type="text/javascript" src="../Content/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="../Content/bootstrap/bootstrap-table-zh-CN.js"></script> <!--4. layer组件的引用-->
<script type="text/javascript" src="../Content/layer/layer.js"></script> <style type="text/css">
/*bootstrap-table选中行颜色*/
.table tbody .selected td {
background-color: #EEE8AA;
}
/*表头颜色*/
/*thead
{
background-color: #333333;
color: #fdfdfd;
}*/
/*隔行变色*/
/*table tbody tr:nth-child(even)
{
background-color: #b6ff00;
}*/ /*表头固定 todo*/
</style>
</head>
<body>
<div class="panel-body">
<div id="toolbar">
<div class="btn-group" style="float:left">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除
</button>
</div>
<!--https://blog.csdn.net/yaomingyang/article/details/80346678-->
<form class="form-inline" style="float:left;margin-left:5px">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">院系</div>
<input type="text" class="form-control" name="searchTexts" id="txt_search_department" placeholder="请输入关键字...">
</div>
</div>
<button id="btn_search" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
</button>
</form>
</div> <div class="table-responsive">
<!--自适应水平滚动条-->
<table id="table"> </table>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
getStudentQueryByPage();
$("#btn_search").click(function () {
getStudentQueryByPage();
})
}
function getStudentQueryByPage() {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
method: 'post', //请求方式
contentType: "application/x-www-form-urlencoded",
url: "../Controllers/IndexController.ashx?action=getStudentQueryByPage", //要请求数据的文件路径
// height: return $(window).height(), //高度调整
// searchTimeOut: '5000',
// showHeader:true,
striped: true, //是否显示行间隔色
pageNumber: 1, //初始化加载第一页，默认第一页
pagination: true, //是否分页
sidePagination: 'server', //指定服务器端分页
pageSize: 2, //单页记录数
pageList: [2, 5, 10], //分页步进值 [10, 20, 50]
showColumns: true, //是否显示所有的列
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
sortable: 'true', //是否启用排序
sortName: 'id',
sortOrder: 'desc', //排序方式
toolbar: '#toolbar', //工具按钮用哪个容器
cache: true, //是否使用缓存，默认是true
//search: true, //搜索框
//searchOnEnterKey: true, //按回车触发搜索方法
showRefresh: true, //刷新按钮 showToggle: true, //详细视图和列表视图的切换按钮 //cardView:false,
//fixedColumns: true,
//fixedNumber:1, //固定列数
queryParamsType: 'undefined', //查询参数组织方式
queryParams: queryParams, //请求服务器时所传的参数
responseHandler: function (res) {
return res;
},
//单机和双击触发的事件，当双击就会获取row，row就是该整行的内容，其中"row.RealName"中"RealName"是data-field定义的字段.
onDblClickRow: function (row, $element, field) {
layer.msg("选中行用户的真实姓名:" + row.name);
},
onClickRow: function (row, $element, field) {
//var i = $element.data("index");//可通过此参数获取当前行号
//layer.msg(i + "，" + row.name + "，" + field); var r = row[field]; //获取当前选中单元格内容
//判断当前单元格是否为空
if (r.length != 0) {
layer.msg(r);
}
},
//获取选中行的数据
//onCheck: function (row) {
// layer.msg("您选中的行的姓名为" + row.name + "，您选中的行的院系为" + row.department);
//},
singleSelect: true, //单选checkbox，只能选中一行
columns: [
{
checkbox: true
},
{
title: '编号',
align: 'center',//居中
//valign: 'bottom',
//手动实现编号 或者通过row_number实现服务器编号
formatter: function (value, row, index) {
var pageNumber = $('#table').bootstrapTable("getOptions").pageNumber;
var pageSize = $('#table').bootstrapTable("getOptions").pageSize;
return pageSize * (pageNumber - 1) + index + 1;
}
},
{
field: 'id',
title: '学号',
align: 'center',
sortable: true
},
{
field: 'name',
title: '姓名',
sortable: true,
align: 'center',
formatter: function (value, row, index) {
return "<span style='color:#FF0000'>" + value + "</span>";
//return "<img onclick=\"FindPersonMeg('" + proCode + "','" + projectName + "')\" title='点击查看责任人信息' src='/Themes/Images/16/application_form_magnify.png' style='vertical-align: middle;cursor: pointer;' alt='' />";
//return "<span style='color:#FF0000' onclick='TestLayer()'>" + value + "</span>";
}
},
{
field: 'sex',
title: '性别',
align: 'center',
sortable: true
},
{
field: 'birth',
title: '出生日期',
align: 'center',
sortable: true
},
{
field: 'department',
title: '院系',
align: 'center',
sortable: true
},
{
field: 'address',
title: '家庭地址',
align: 'center'
},
{ title: '详细信息',
align: 'center',//居中
formatter: function (value, row, index) {
// "<img title='点击查看详细信息' src='Content/favicon.ico' style='vertical-align: middle;cursor: pointer;' alt='' />"; var detail = "<button type=\"button\" onclick=\"detailMsg('" + row.id + "','"+row.name+"')\" >"
+ "<span class=\"glyphicon glyphicon-search\">查看详细信息</span> </button>";
return detail;
}
}
]
});
} function queryParams(params) {
//方式一
//params.project = $("#project").val();
//params.start = $("#start").val();
//params.end = $("#end").val();
//params.alarmType = $("#alarm-type").val();
params.txt_search_department = $("#txt_search_department").val();
return params; //方式二
//return {
// pageSize: params.limit,
// pageNumber: params.pageNumber
//}
} // 获取选中行的数据
$("#btn_edit").click(function (e) { //var allTableData = $('#table').bootstrapTable('getData');//获取表格的所有内容行 var getSelectionsRows = $('#table').bootstrapTable("getSelections"); //获取suoyou选中行的内容
var name = getSelectionsRows[0].name;
var sex = getSelectionsRows[0].sex;
var birth = getSelectionsRows[0].birth;
var department = getSelectionsRows[0].department;
var address = getSelectionsRows[0].address; if (getSelectionsRows.length == 1) {
//layer.open({
// type: 2, // iframe层
// title: '编辑',
// shadeClose: true,
// shade: 0.8,
// area: ['800px', '600px'],
// content: ['./Test3Form.aspx?Account=' + escape(Account) + "&RealName=" + escape(RealName)
// + "&Gender=" + escape(Gender) + "&Mobile=" + escape(Mobile) + "&Email=" + escape(Email)
// + "&LastVisit=" + escape(LastVisit) + "&CreateDate=" + escape(CreateDate), 'no']
//}); alert("姓名：" + name + ", 性别：" + sex + ", 院系：" + department);
} else {
alert("请只选中一行！！！");
}
}); //获取详细信息
function detailMsg(id,name) {
//var id = document.getElementById("id").value;
//var url = "/Controllers/IndexController.ashx"
//var data = "action=getDetail&name=" + name + "&id=" + id;
//$.ajax({
// type: "get",
// url: url,
// data: data,
// dataType: "text",
// success: function (msg) {
// //return msg;
// alert("姓名：" + msg);
// },
// error: function () {
// Console.log("请求失败" + data);
// },
// //beforSend: function () {
// // // 禁用按钮防止重复提交
// // $("#submit").attr({ disabled: "disabled" });
// //}
//});
alert(name);
}
</script>
</body>
</html>
如果初始化的参数 sidePagination: "server" 设置为在服务端分页，那么我们的返回值必须告诉前端总记录的条数和当前页的记录数，然后前端才知道如何分页。并且最重要的一点，这两个参数的名字必须为total和rows。