一、bootstrap-table使用基础-----必要的引入
<!--样式文件-->
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-table-develop/src/bootstrap-table.css" rel="stylesheet">
<!--js文件-->
<script src="js/jquery-2.2.4.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="assets/bootstrap-table-develop/src/bootstrap-table.js"></script>
<script src="assets/bootstrap-table-develop/src/bootstrap-table-zh-CN.js"></script>
<!-- 自己封装的包含分页和数据请求的初始化 -->
<script src="assets/bootstrap-table-develop/src/bootstrap-table-common.js"></script><script src="assets/bootstrap-table-develop/src/bootstrap-table-common.js"></script>
/**
* @author :
* version :
* description :Encapsulation of common table content
* 参数说明:id :bootstrap-table id
* url :数据请求url
* queryParams :
* pagination : 是否显示分页
* strictSearch: 是否显示搜索
*/
// 初始化表格
function initTable(id, url, queryParams, pagination, strictSearch) {
//先销毁表格
$('#' + id).bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
$("#" + id).bootstrapTable({
method : "get", // 使用get请求到服务器获取数据
url : url, // 获取数据的Servlet地址
toolbar : '#toolbar', // 工具按钮用哪个容器
cache : false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
striped : true, // 表格显示条纹
pagination : pagination, // 启动分页
pageSize : 15, // 每页显示的记录数
pageNumber : 1, // 当前第几页
search : true, // 是否启用查询
strictSearch : strictSearch, // 查询
showRefresh : true, // 显示刷新按钮
showToggle : false, // 是否显示详细视图和列表视图的切换按钮
showColumns : true, // 显示下拉框勾选要显示的列
minimumCountColumns : 2, // 最少允许的列数
clickToSelect : true, // 是否启用点击选中行
uniqueId : "ID", // 每一行的唯一标识,一般为主键列
cardView : false, // 是否显示详细视图
detailView : false, // 是否显示父子表
sidePagination : "server", // 表示服务端请求
queryParams : queryParams
});
}
// 删除表格整行
function onRemove(rowId){
$('table').bootstrapTable('remove',{
fild: 'rowId',
values: rowId
})
}
二、表格渲染方式:
方式一:
<table class="table table-hover table-responsive table-bordered" id="cusTable">
<thead>
<tr>
<th data-field="checkbox" data-checkbox="true"></th>
<th data-field="projectName">项目名称</th>
<th data-field="projectType" data-sortable="true">项目类型</th>
<th data-field="PersonInCharge" data-sortable="true" data-width='200'>负责人</th>
<th data-field="participants" data-sortable="true" data-width='160'>参与人数</th>
<th data-field="stopTime" data-sortable="true" data-width='160'>项目结束时间</th>
<th data-field="option" data-width='60' data-formatter="actionFormatter">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
initTable('cusTable', 'data/data.json', queryParams, true,true);
//data/data.json 的格式:rows:[],total:,为分页状态
});
var queryParams = function(params){
var param = {
pageNumber : params.offset,
pageSize : params.limit,
sortName : params.sort
};
if (params.sort) {
param.sortOrder = params.order;
}
return param;
}
// 定义操作按钮
function actionFormatter(value, row, index) {
if (row.projectName=="考试系统") {
return [
'<a data-id="' + row.projectName + '" class="edit-action" href="javascript:void(0);" style="cursor:pointer;" title="编辑"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> ',
'<a data-id="' + row.projectName + '" class="trash-action" href="javascript:void(0);" οnclick="onRemove('+row.projectName+')" title="删除"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>'
].join('');
}else{
return [
'<a data-id="' + row.projectName + '" class="trash-action" href="javascript:void(0);" style="cursor:pointer;" title="删除"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>'
].join('');
}
}
</script>
方式二:
<table class="table table-hover table-responsive table-bordered" id="table" data-url="data/data.json">
<thead>
<tr>
<th data-field="checkbox" data-checkbox="true"></th>
<th data-field="projectName">项目名称</th>
<th data-field="projectType" data-sortable="true">项目类型</th>
<th data-field="PersonInCharge" data-sortable="true" data-width='200'>负责人</th>
<th data-field="participants" data-sortable="true" data-width='160'>参与人数</th>
<th data-field="stopTime" data-sortable="true" data-width='160'>项目结束时间</th>
<th data-field="option" data-width='60' data-formatter="actionFormatter">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#table").bootstrapTable({
//如不设置分页那么数据源不需要totals和rows,只需要data就可以
pagination: true,
sidePagination: 'server' // 设置为服务器端分页
});
});
</script>
数据源格式:
{
"total": 20,
"rows": [
{
"projectName": "考试系统",
"projectType": "研发类",
"PersonInCharge": "项..,刘..",
"participants": "8",
"stopTime":"2018-05-01 00:00:00",
"option":""
},
{
"projectName": "ERP",
"projectType": "研发类",
"PersonInCharge": "邵..,石..,张..,刘..",
"participants": "8",
"stopTime": "2017-09-30 00:00:00",
"option": ""
},
{
"projectName": "INS 2.0",
"projectType": "研发类",
"PersonInCharge": "项..,刘.",
"participants": "8",
"stopTime": "2017-12-31 00:00:00",
"option":""
},
{
"projectName": "考试系统",
"projectType": "研发类",
"PersonInCharge": "项..,刘..",
"participants": "8",
"stopTime": "2018-05-01 00:00:00",
"option":"删除"
}
]
}