SpringMVC+bootstrap table實例詳解
更新時間：2017年06月02日 09:14:17 作者：小爺胡漢三
本文通過實例給大家介紹了SpringMVC+bootstrap-table,需要的朋友可以參考下
bootstrap-table下載地址：https://github.com/wenzhixin/bootstrap-table/
先來看一張效果圖：
下載下來后，需要導入的css：由于需要bootstrap的支持，所以需要導入bootstrap的css
<!-- Bootstrap -->
<link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow"
rel="stylesheet">
<link href="${contextPath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow"
rel="stylesheet">
需要導入的js：除了bootstrap的js跟table的js外第一個要導入的就是jQuery的js，他們都是基于jQuery開發(fā)的
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${contextPath }/static/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${contextPath }/static/bootstrap/table/bootstrap-table.js"></script>
<script src="${contextPath }/static/bootstrap/table/locale/bootstrap-table-zh-CN.js"></script>
bootstrap-table-zh-CN.js這個js是用來漢化table的提示文字的，在下載下來的bootstrap-table文件夾下的locale文件夾中有很多的語言包支持
完啦，我們只需要在html頁面中聲明一個table跟菜單div(如果不需要，可以不聲明)就好：
<div class="container-fluid">
<div id="toolbar" class="btn-group">
<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-remove" aria-hidden="true"></span>刪除
</button>
<button id="btn_info" type="button" class="btn btn-default">
<span class="fa fa-info" aria-hidden="true"></span>詳情
</button>
</div>
<table id="table_sysUser"></table>
</div>
table_sysUser就是我們要顯示的table列表啦。
我們來看看js怎么來請求后臺的數(shù)據(jù)，并進行分頁跟查詢：
//項目根目錄
var path = $("#contextPath").val();
$(document).ready(function() {
//初始化Table
var oTable = new TableInit();
oTable.Init();
//初始化頁面上面的按鈕事件
$("#btn_add").click(function(){
//新增
});
$("#btn_edit").click(function(){
//編輯
});
$("#btn_info").click(function(){
//詳情
});
$("#btn_delete").click(function(){
//刪除
});
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#table_sysUser').bootstrapTable({
url: path+'/sysuser/findUser.action', //請求后臺的URL（*）
method: 'post', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: true, //是否啟用排序
sortName:"id",
sortOrder: "desc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
queryParamsType: 'limit',
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 15, //每頁的記錄行數(shù)（*）
pageList: [10, 15, 20, 50], //可供選擇的每頁的行數(shù)（*）
search: true, //是否顯示表格搜索
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點擊選中行
//height: 500, //行高，如果沒有設置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
uniqueId: "id", //每一行的唯一標識，一般為主鍵列
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
contentType: "application/x-www-form-urlencoded", //解決POST提交問題
columns: [
{checkbox: true },
{title:'用戶名稱',field: 'userName',sortable:true },
{title:'手機號碼',field: 'phone',sortable:true,
formatter:function(v,r,i){
if(v){
return v.substring(0,3)+"****"+v.substring(7,4);
}
return v;
}
},
{title:'郵箱賬號',field: 'email',sortable:true },
{title:'生日',field: 'birthday',sortable:true },
{title:'部門',field: 'departmentKey',sortable:true,
formatter:function(v,r,i){
if(r.departmentValue){
return r.departmentValue;
}
return "";
}
},
{title:'最后登錄時間',field: 'lastLogintime',sortable:true },
{title:'性別',field: 'sex',sortable:true,
formatter:function(v,r,i){
switch (Number(v)) {
case 1:
return "男";
break;
case 2:
return "女";
break;
default:
return "未知";
break;
}
}
},
{title:'用戶狀態(tài)',field: 'status',sortable:true,
formatter:function(v,r,i){
return r.statusCn == "false"?"啟用":"禁用";
}
},
{title:'所屬公司編號',field: 'companyId',sortable:true },
{title:'注冊時間',field: 'createTime',sortable:true },
{title:'用戶頭像',field: 'userhead',sortable:true },
{title:'職位',field: 'positionKey',sortable:true},
{title:'角色',field:'role'}]
});
};
//得到查詢的參數(shù)
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
pageSize: params.limit, //頁面大小
<span style="white-space:pre"> </span>pageNumber: params.pageNumber, //頁碼
<span style="white-space:pre"> </span>sortName: params.sort,<span style="white-space:pre"> </span>//排序列名
<span style="white-space:pre"> </span>sortOrder:params.order,<span style="white-space:pre"> </span>//排序方式
<span style="white-space:pre"> </span>searchText:params.search<span style="white-space:pre"> </span>//搜索框參數(shù)
};
return temp;
};
return oTableInit;
};
很多參數(shù)在代碼注釋里面說得很明顯啦，我們來說說怎么新增查詢參數(shù)，我們只需要在queryParams方法里面在新增參數(shù)信息就行：
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
pageSize: params.limit, //頁面大小
pageNumber: params.pageNumber, //頁碼
sortName: params.sort, //排序列名
sortOrder:params.order, //排序方式
searchText:params.search, //搜索框參數(shù)
searchText:params.search, //搜索框參數(shù)
};
return temp;
};
bootstrap-table獲取頁面上勾選的數(shù)據(jù)：
var rowData = $("#table_sysUser").bootstrapTable("getSelections");
bootstrap-table刷新表格：
$('#table_sysUser').bootstrapTable('refresh');
相關文章
這篇文章主要介紹了詳解JavaScript時間格式化的相關資料,需要的朋友可以參考下2015-12-12
要實現(xiàn)短信驗證碼界面，首先要有一個文本框，旁邊是按鈕，點擊時開始倒計時。接下來通過本文給大家分享js實現(xiàn)簡單短信驗證碼界面，感興趣的朋友參考下吧2017-08-08
JavaScript知識點總結(jié)(五)之Javascript中兩個等于號(==)和三個等于號(===)的區(qū)別
這篇文章主要介紹了JavaScript知識點總結(jié)(五)之Javascript中兩個等于號(==)和三個等于號(===)的區(qū)別的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了opencv 識別微信登錄驗證滑動塊位置及各自的優(yōu)缺點,需要的朋友可以參考下2018-08-08
這篇文章主要為大家分享超詳細的JS彈出窗口代碼大全，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript創(chuàng)建對象的常用方式總結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對象的常用方式,結(jié)合實例形式總結(jié)分析了javascript面向?qū)ο蟪绦蛟O計中對象創(chuàng)建的常見方式、相關操作技巧與注意事項,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了js在IE與FF之間的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
動畫的原理是通過定時器setInterval() 不斷移動盒子位置。但是如果同時有好幾個元素都需要添加動畫呢？我們就可以考慮將其封裝成一個簡單的動畫函數(shù)。本文將為大家介紹如何進行封裝，需要的可以參考一下2021-12-12
JavaScript使用IEEE 標準進行二進制浮點運算產(chǎn)生莫名錯誤的解決方法
javascript做帶小數(shù)的計算時，會出現(xiàn)9的循環(huán)，以下方法幫助解決。2011-05-05
基于layui的table插件進行復選框聯(lián)動功能的實現(xiàn)方法
今天小編就為大家分享一篇基于layui的table插件進行復選框聯(lián)動功能的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09