Bootstrap table的使用方法
更新時間：2016年11月02日 15:04:05 作者：碼農(nóng)小汪
這篇文章主要為大家詳細(xì)解析了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下
Jquery中的一些東西學(xué)習(xí)一下子，補充完善一下，畢竟有些時候沒有使用到
這個方式很有用，在使用bootstrap table的時候，選擇當(dāng)前已經(jīng)選擇的節(jié)點的事件中的ID的值
當(dāng)前rows中有很多的數(shù)據(jù)，但是我只需要id這一個值，這個時候進(jìn)行操作就非常的簡單了。
$.map(data,function(item,index){return XXX})
//使用的總結(jié)：
//把一個數(shù)組，按照新的方式進(jìn)行組裝返回，和原來的數(shù)組不一樣。
//遍歷data數(shù)組中的每個元素，并按照return中的計算方式 形成一個新的元素，放入返回的數(shù)組中
var b = $.map( [55,1,2], function( item,index ) {
return {
"label": item,
"value": index
}
});
alert(b[0].label +" "+ b[0].value);
//輸出為 55 0
2.我的后臺呢，是使用SpringMVC進(jìn)行寫的，期間呢也是遇到了很多的問題，進(jìn)行分頁處理的時候
使用了離線查詢，但是呢，我使用的是execute()這個方法，傳入的session為代理類的數(shù)據(jù)，不能再下面這個方法中進(jìn)行轉(zhuǎn)換
導(dǎo)致錯誤了，我還百度了很久，最后才發(fā)現(xiàn)是這個問題導(dǎo)致的
/** * Get an executable instance of <literal>Criteria</literal>, * to actually run the query. */
public Criteria getExecutableCriteria(Session session) {
impl.setSession( ( SessionImplementor ) session );
return impl;
}
return (PageBean) getHibernateTemplate().executeWithNativeSession(new HibernateCallback() {
public Object doInHibernate(Session session) throws HibernateException {
Criteria criteria = detachedCriteria.getExecutableCriteria(session);
............................
}
后臺呢，我返回的數(shù)據(jù)和格式不是按照BootStrap中的格式有點差別吧，反正就是不一樣
{
"success": true,
"message": null,
"data": {
"pageSize": 15,
"rows": [
{
"userName": "333",
"userType": 333,
"password": "333",
"id": 11,
"indexcode": "333"
},
{
"userName": "3",
"userType": 333,
"password": "333",
"id": 5,
"indexcode": "33333"
}
.......
],
"total": 17,
"totalPage": 2,
"page": 0,
"hasPreviousPage": true,
"hasNextPage": true,
"lastPage": false,
"firstPage": false
}
}
主要是這里我是用了統(tǒng)一的返回接口 ActionResult，這樣比較方便書寫格式，統(tǒng)一后端
**
* Created by JetWang on 2016/10/1.
*/
public class ActionResult {
private boolean success;
private String message;
private Object data;
public ActionResult(){
}
public ActionResult(boolean success){
this(success, null, null);
}
............
}
來看看前端的效果吧
前端的頁面
<%@ include file="./common/common.jsp"%> //什么公用的bootstrapt ，JQuery啊之類的引用放進(jìn)去處理了 <script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.js" type="text/javascript"></script> <script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table-locale-all.js" type="text/javascript"> </script> <link rel="stylesheet" href="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.css" type="text/css"> //這里就是容器中放置table的 <div class="container"> <table id="table" data-url="/cms/UserInfo/userInfoPage">//使用的路徑，后臺請求的URL </table> </div>
比較重要的JS代碼的說明
jQuery(document).ready(function() {
//這里你可以使用各種法師，也可以使用seajs前端模塊化工具
下面放置我們的js代碼就好了
});
下面的配置文件和一些事件的重寫呢，你可以查看文檔，或者自己去看看你源碼
這里你可以進(jìn)行重寫哦~~ ，extentd進(jìn)行重新的覆蓋！
BootstrapTable.DEFAULTS = {
classes: 'table table-hover',
locale: undefined,
height: undefined,
undefinedText: '-',
sortName: undefined,
sortOrder: 'asc',
sortStable: false,
striped: false,
columns: [[]],
data: [],
dataField: 'rows',
method: 'get',
url: undefined,
ajax: undefined,
cache: true,
contentType: 'application/json;charset=UTF-8',//這里我就加了個utf-8
dataType: 'json',
ajaxOptions: {},
queryParams: function (params) {//這個是設(shè)置查詢時候的參數(shù)，我直接在源碼中修改過，不喜歡offetset 我后臺用的 是pageNo. 這樣處理就比較的滿足我的要求，其實也可以在后臺改，麻煩！
return params;
},
queryParamsType: 'limit', // undefined (這里是根據(jù)不同的參數(shù)，選擇不同的查詢的條件)
responseHandler: function (res) {//這里我查看源碼的，在ajax請求成功后，發(fā)放數(shù)據(jù)之前可以對返回的數(shù)據(jù)進(jìn)行處理，返回什么部分的數(shù)據(jù)，比如我的就需要進(jìn)行整改的！
return res;
},
pagination: false,
onlyInfoPagination: false,
sidePagination: 'client', // client or server
totalRows: 0, // server side need to set
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: '‹',
paginationNextText: '›',
search: false,
searchOnEnterKey: false,
strictSearch: false,
searchAlign: 'right',
selectItemName: 'btSelectItem',
showHeader: true,
showFooter: false,
showColumns: false,
showPaginationSwitch: false,//展示頁數(shù)的選擇？
showRefresh: false,
showToggle: false,
buttonsAlign: 'right',
smartDisplay: true,
escape: false,
minimumCountColumns: 1,
idField: undefined,
uniqueId: undefined,
cardView: false,
detailView: false,
detailFormatter: function (index, row) {
return '';
},
trimOnSearch: true,
clickToSelect: false,
singleSelect: false,
toolbar: undefined,
toolbarAlign: 'left',
checkboxHeader: true,
sortable: true,
silentSort: true,
maintainSelected: false,
searchTimeOut: 500,
searchText: '',
iconSize: undefined,
buttonsClass: 'default',
iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
icons: {
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus'
},
customSearch: $.noop,
customSort: $.noop,
rowStyle: function (row, index) {
return {};
},
rowAttributes: function (row, index) {
return {};
},
footerStyle: function (row, index) {
return {};
},
onAll: function (name, args) {
return false;
},
onClickCell: function (field, value, row, $element) {
return false;
},
onDblClickCell: function (field, value, row, $element) {
return false;
},
onClickRow: function (item, $element) {
return false;
},
onDblClickRow: function (item, $element) {
return false;
},
onSort: function (name, order) {
return false;
},
onCheck: function (row) {
return false;
},
onUncheck: function (row) {
return false;
},
onCheckAll: function (rows) {
return false;
},
onUncheckAll: function (rows) {
return false;
},
onCheckSome: function (rows) {
return false;
},
onUncheckSome: function (rows) {
return false;
},
onLoadSuccess: function (data) {
return false;
},
onLoadError: function (status) {
return false;
},
onColumnSwitch: function (field, checked) {
return false;
},
onPageChange: function (number, size) {
return false;
},
onSearch: function (text) {
return false;
},
onToggle: function (cardView) {
return false;
},
onPreBody: function (data) {
return false;
},
onPostBody: function () {
return false;
},
onPostHeader: function () {
return false;
},
onExpandRow: function (index, row, $detail) {
return false;
},
onCollapseRow: function (index, row) {
return false;
},
onRefreshOptions: function (options) {
return false;
},
onRefresh: function (params) {
return false;
},
onResetView: function () {
return false;
}
};
看看上面的自己也基本上曉得怎么去，書寫了！其實之前我根本不敢這么玩，只不過之前實習(xí)過程中導(dǎo)師教過我怎么去玩，所以我才敢，我相信，我可以好好的 玩好這些東西的！
function initTable() {
$table.bootstrapTable({
striped: true, //表格顯示條紋
pagination: true, //啟動分頁
pageSize: 15, //每頁顯示的記錄數(shù)
pageNumber:1, //當(dāng)前第幾頁
pageList: [10, 15, 20, 25], //記錄數(shù)可選列表
search: false, //是否啟用查詢
showColumns: true, //顯示下拉框勾選要顯示的列
showRefresh: true, //顯示刷新按鈕
sidePagination: "server", //表示服務(wù)端請求
//設(shè)置為undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder
//設(shè)置為limit可以獲取limit, offset, search, sort, order
responseHandler:function(res){
//遠(yuǎn)程數(shù)據(jù)加載之前,處理程序響應(yīng)數(shù)據(jù)格式,對象包含的參數(shù): 我們可以對返回的數(shù)據(jù)格式進(jìn)行處理
//在ajax后我們可以在這里進(jìn)行一些事件的處理
return res.data;
},
queryParamsType : "undefined",
queryParams: function queryParams(params) { //設(shè)置查詢參數(shù)
var param = {
//這里是在ajax發(fā)送請求的時候設(shè)置一些參數(shù) params有什么東西，自己看看源碼就知道了
pageNo: params.pageNumber,
pageSize: params.pageSize
};
return param;
},
onLoadSuccess: function(data){ //加載成功時執(zhí)行
alert("加載成功"+data);
},
onLoadError: function(){ //加載失敗時執(zhí)行
layer.msg("加載數(shù)據(jù)失敗", {time : 1500, icon : 2});
},
height: getHeight(),
columns: [
{
field: 'state',
checkbox: true,
align: 'center',
valign: 'middle'
}, {
title: 'ID',
field: 'id',
align: 'center',
valign: 'middle'
},
{
field: 'userName',
title: 'UserName',
sortable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'userType',
title: 'UserType',
sortable: true,
align: 'center'
},
{
field: 'password',
title: 'UserPass',
sortable: true,
align: 'center'
},{
field: 'indexcode',
title: 'Indexcode',
sortable: true,
align: 'center'
},{
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
});
上面的 footerFormatter 和 formatter 都是對于當(dāng)前列的顯示進(jìn)行處理的事件，文檔中如下
formatter:
The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index.
footerFormatter :
The context (this) is the column Object. The function, take one parameter:
data: Array of all the data rows. the function should return a string with the text to show in the footer cell.
都是對于當(dāng)前列進(jìn)行處理顯示
如下就是增加了兩個按鈕在一個單元格中
function operateFormatter(value, row, index) {
return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="glyphicon glyphicon-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');
}
也可以在這里就增加事件的處理
<%--{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" rel="nofollow" target="_blank" mce_href="#" rel="nofollow" target="_blank" onclick="edit(\''+ row.id + '\')">編輯</a> ';
var d = '<a href="#" rel="nofollow" target="_blank" mce_href="#" rel="nofollow" target="_blank" onclick="del(\''+ row.id +'\')">刪除</a> ';
return e+d;
也可以這樣處理事件的
}
}--%>
官方中文檔說的處理事件可以像下面這里處理
The cell events listener when you use formatter function, take four parameters: event: the jQuery event. value: the field value. row: the row record data. index: the row index.
Example code:
{
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
function operateFormatter(value, row, index) {
return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="glyphicon glyphicon-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
處理系統(tǒng)中存在的事件的處理，文檔中有說
$('#table').bootstrapTable({
onEventName: function (arg1, arg2, ...) {
// ...
}
});
$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
// ...
});
//這個名字文檔中很多!
onAll all.bs.table
name, args
Fires when all events trigger, the parameters contain:
name: the event name,
args: the event data.
處理一些方法，比如當(dāng)前選擇了多少行，全選等等
//The calling method syntax: $('#table').bootstrapTable('method', parameter);
//1 當(dāng)前選擇選的框框的id
getSelections none Return selected rows, when no record selected, an empty array will return.
//2.全選
getAllSelections none Return all selected rows contain search or filter, when no record selected, an empty array will return.
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args);
});
//3.刪除 前臺的數(shù)據(jù)，不需要從后臺重新加載
remove params Remove data from table, the params contains two properties:
field: the field name of remove rows.
values: the array of values for rows which should be removed.
.....很多很多的東西！
一個刪除的按鈕，刪除所有的選擇的事件！是不是很好呢！
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
}
$remove.click(function () {
var ids = getIdSelections();
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
DOM節(jié)點刪除函數(shù)removeChild()用法實例
這篇文章主要介紹了DOM節(jié)點刪除函數(shù)removeChild()用法,實例分析了removeChild()函數(shù)實現(xiàn)結(jié)點刪除的技巧,需要的朋友可以參考下2015-01-01
網(wǎng)站開發(fā)時經(jīng)常需要在某個頁面需要實現(xiàn)對大量圖片的瀏覽;用javascript來實現(xiàn)一個圖片瀏覽器，讓用戶無需等待過長的時間就能看到其他圖片2012-12-12
下面小編就為大家?guī)硪黄猨s 用于檢測類數(shù)組對象的函數(shù)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
下面是自己寫的一個簡單的函數(shù)，用于截取固定長度的字符串，中英文都適用.若有不妥之處還請高手指正2013-11-11
相信很多與頁面打過交道的同學(xué)都對 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生2011-10-10
js實現(xiàn)用戶離開頁面前提示是否離開此頁面的方法（包括瀏覽器按鈕事件）
這篇文章主要介紹了js實現(xiàn)用戶離開頁面前提示是否離開此頁面的方法,較為詳細(xì)的分析了javascript針對瀏覽器事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了js圖片輪播插件的封裝代碼，只需要獲取到圖片和按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
原生javascript實現(xiàn)Tab選項卡切換功能
本文主要介紹了使用原生javascript實現(xiàn)Tab選項卡切換的功能，雖然jQuery有很多類似的插件，單jQuery庫著實有點龐大，這種小功能還是直接用javascript來做就好了。2015-01-01
快速學(xué)習(xí)JavaScript的6個思維技巧
在這篇文章中，我將介紹六個思維技巧來幫助你更快地學(xué)習(xí)JavaScript，并成為一個更快樂、更富有成效的程序員。2015-10-10
Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件
這篇文章主要介紹了Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06