放假前比较轻松，这里抽空记录一下bootstrap table的使用方法。由于bootstrap table分页方式分两种，客户端和服务端，所以打算分上下两篇文章来记录。废话不多说，还是按照老规矩先来几个参考地址BootStrap Table中文文档，BootStrap Table使用方法，当然使用之前还要引入Jquery和BootStrap库，它们之间是依赖关系。
table所在JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="baseurl" value="${pageContext.request.contextPath}/"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="${baseurl }/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${baseurl }/bootstrap/css/bootstrap-table.css"/>
<script src="${baseurl }/jquery/jquery.min.js"></script>
<script src="${baseurl }/bootstrap/js/bootstrap-table.js"></script>
<script src="${baseurl }/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="${baseurl }/scripts/test.js"></script>
<title>test</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div>
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-default glyphicon glyphicon-pencil" id="btn-add">新增</button>
<button type="button" class="btn btn-default glyphicon glyphicon-edit" id="btn-edit">编辑</button>
<button type="button" class="btn btn-default glyphicon glyphicon-remove" id="btn-del">删除</button>
</div>
</div>
<table id="test-table"></table>
</div>
</div>
</div>
</body>
</html>这个使用示例是使用js方法初始化table，所以还要写一个test.js文件
$(function() {
/*load页面之后，加载数据*/
initTable();
/*点击删除*/
$("#btn-del").click(function() {
//处理逻辑
});
/* 点击新增*/
$("#btn-add").click(function() {
//处理逻辑
});
/*点击编辑 */
$("#btn-edit").click(function() {
//处理逻辑
});
});
/* 改变可用状态available*/
function changeStatus(event) {
//处理逻辑
}
/*
* 初始化表格
*/
function initTable(){
var rows = new Array();
$('#test-table').bootstrapTable({
method : 'get', //服务器数据的请求方式 'get' or 'post'
contentType : "application/json", //发送到服务器的数据编码类型
url : '/test/test/getList', //服务器数据的加载地址
dataType : 'json', //服务器返回的数据类型
cache : false, //设置禁用 AJAX 数据缓存
pagination : true, //设置为 true 会在表格底部显示分页条
paginationLoop : false, //设置分页条禁用循环的功能。
sidePagination : "client", //分页方式：client客户端分页，server服务端分页（*）
striped : true, //设置隔行变色效果
clickToSelect : true, //在点击行时，自动选择rediobox 和 checkbox
queryParams : queryParams, //请求服务器时附加的参数
queryParamsType : '', //若设置为 'limit' 则会发送符合 RESTFul 格式的参数
minimumCountColumns : 2, //当列数小于此值时，将隐藏内容列下拉框。
paginationPreText : '上一页',
paginationNextText : '下一页',
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 15, //每页的记录行数（*）
pageList : [5,10,15], //可供选择的每页的行数（*）
toolbar : '#toolbar', //指定工具按钮组的容器
toolbarAlign : 'right', //指定 toolbar 水平方向的位置。'left' or 'right'
uniqueId : "id", //每一行的唯一标识，一般为主键列
responseHandler : responseHandler, //加载服务器数据之前的处理程序，可以用来格式化数据。 参数：res为从服务器请求到的数据。
/*
* 监听事件：行全选/多选/取消多选时需要改变样式——选中多行时不可编辑，只可删除
*/
onCheckAll: function (rows) {
$("#btn-edit").attr("disabled","disabled");
},
onUncheckAll: function (rows) {
$("#btn-edit").removeAttr("disabled");
},
onCheck: function (row) {
rows.push(row);
if (rows.length > 1) {
$("#btn-edit").attr("disabled","disabled");
} else {
$("#btn-edit").removeAttr("disabled");
}
},
onUncheck: function (row) {
removeByValue(rows,row);
if (rows.length > 1) {
$("#btn-edit").attr("disabled","disabled");
} else {
$("#btn-edit").removeAttr("disabled");
}
},
columns: [
{
selectItemName :'btSelectItem',
checkbox:true,
align : 'center',
valign : 'middle'
},{
field : 'id',
title : '序号',
visible:false,
align : 'center',
valign : 'middle'
},{
field : 'roleName',
title : '角色名',
align : 'center',
valign : 'middle'
},{
field : 'available',
title : '是否可用',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if (value == '0') {
return '是';
} else if (value == '1') {
return '否';
}
}
},{
field : 'createTime',
title : '创建时间',
align : 'center',
valign : 'middle'
},{
field : 'updateTime',
title : '修改时间',
align : 'center',
valign : 'middle'
},{
field : 'available',
title : '操作',
align : 'center',
valign : 'middle',
formatter:function(value,row,index){
if (value == '0') {
return '<button type="button" class="btn btn-link btn-sm" onclick="changeStatus(this);">禁用</button>';
} else if (value == '1') {
return '<button type="button" class="btn btn-link btn-sm" onclick="changeStatus(this);">激活</button>';
}
}
}]
});
}
function refresh() {
$("#test-table").bootstrapTable('refreshOptions',{url:'/jzkfgl/role/getList'});
}
function removeByValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}由于设置在客户端分页，所以会从数据库中一下把所有符合条件的数据全部查询出来，然后在客户端由bootstrap table帮你分页，即使要使用搜索框进行模糊查询，也只是需要在初始化table的时候设置启用搜索框，并进行相应的设置，具体的属性请参考官方文档。客户端分页这就算完成了，如果需要参考服务端分页，请点这里。
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
