前言
一直想將之前以及目前用的插件整理下，趁現在有時間了趕緊進行。
本插件基於bootstrap，網上各種例子也比較多，本文就不詳細列api一類的了，只將自己常用的記錄一下。多數代碼中存在的註釋，就不再重寫。
引用
bootstrap基礎環境是必須的，這裏就不在列出了，僅列該插件本身的。
${pageContext.request.contextPath}爲java中jsp裏的一種獲取地址的寫法，請自行酌情修改。
<!-- 插件核心，必選-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap-table.min.css">
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-table.js"></script>
<!-- 語言環境，自行選用 -->
<script src="${pageContext.request.contextPath}/assets/js/bootstrap-table-zh-CN.min.js"></script>
<!-- 單元格內容編輯，選用 -->
<script src="${pageContext.request.contextPath}/js/bootstrap-editable.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table-editable.min.js"></script>使用
html部分
<table data-toggle="table" id="postsTale" class="table table-striped table-bordered table-hover"> </table>
js調用部分
columns部分爲傳遞的參數列表，field爲對應參數屬性名稱，title爲表格展示出來的名稱（表頭）。
var postsTale=$("#postsTale").bootstrapTable({
url:basePath+"/prizes/findAllPrizeOfPage.do",
showPaginationSwitch:false,
clickToSelect:true,
height:450,
pagination: true, //啓動分頁
sidePagination: "server", //表示服務端請求
pageSize: 10, //每頁顯示的記錄數
pageNumber:1, //當前第幾頁
queryParamsType : "undefined",
columns: [
{
field: 'Id',
checkbox: true,
visible: true
},
{
field: 'id',
title: 'ID',
visible: true,
formatter : function(value, row, index) {
//自定義展示形式，此處爲連續id，使用該處需要更改該插件js源碼。
//return index + 1;
var page = postsTale.bootstrapTable("getPage");
return page.pageSize * (page.pageNumber - 1) + index + 1;
}
},{
field: 'pname',
title: '名稱',
align: 'center',
sortable: false,
clickToSelect: false
}, {
field: 'picurl',
title: '首頁圖片',
align: 'center',
sortable: false,
clickToSelect: false,
formatter: imageFormatter
},{
field: 'pcontent',
title: '描述',
align: 'center',
sortable: false,
clickToSelect: false,
},{
field: 'pmodel',
title: '型號',
align: 'center',
sortable: false,
clickToSelect: false,
formatter:function(value, row, index){
if(value==''||value==undefined){
return "-";
}
return value;
}
},{
field: 'pnum',
title: '庫存',
align: 'center',
sortable: false,
clickToSelect: false
},{
field: 'credits',
title: '所需積分',
align: 'center',
sortable: false,
clickToSelect: false,
},{
field: 'createtime',
title: '創建時間',
align: 'center',
sortable: false,
clickToSelect: false,
},{
field: 'operation',
title: '操作',
formatter:function(value,row,index){
// var s = '<a class = "editorTodObj" href="javascript:void(0)">修改</a>';
// var d = '<a class = "lookPosts" href="javascript:void(0)">刪除</a>';
// return s+' '+d;
var s = '<p><button class = "btn btn-success " onclick="editorPrize(\''+row.id+'\')" >修改</button></p><p><button class = " btn btn-danger " onclick="deletePrize(\''+row.id+'\')">刪除</button></p>';
return s;
},
events: 'operateEvents'
}
],
queryParams: function queryParams(params) { //設置查詢參數
var param = {
currentPage: params.pageNumber,
pageSize: params.pageSize,
// uphone:document.getElementById('input-phone').value,
};
return param;
},
onLoadSuccess: function(value,row,index){ //加載成功時執行
// layer.msg("加載成功",{time : 1500, icon : 1});
alert("加載成功");
},
onLoadError: function(){ //加載失敗時執行
//layer.msg("加載數據失敗", {time : 1500, icon : 2});
alert("加載數據失敗");
}
});imageFormatter
用於自定義的外部函數
function imageFormatter(value, row, index) {
//value當前值，row爲這一行的對象以及相關內容
if(value==''||value==undefined){
return "暫無首頁圖片";
}
return " <a href='" + value + "' data-lightbox='roadtrip' ><img src='" + value + "' style='width:50px; height:50px;' />";
}更新
可用於編輯或刪除等操作後，刷新表格內容。
postsTale.bootstrapTable('refresh');編輯表格
使用前需引用上面說的相應js。
columns中對應需要編輯的要改成如下類似形式editable是必須的。
{
field: 'sortNum',
title: '排序',
align: 'center',
sortable: false,
clickToSelect: false,
editable: {
type: 'text',
title: '排序',
validate: function (v) {
if (isNaN(v)) return '排序必須是數字';
var age = parseInt(v);
if (age < 0) return '排序必須是正整數';
}
}
}監聽事件要增加一個onEditableSave。
onEditableSave:function (field, row, oldValue, $el) {
//修改成功後，調用後臺api傳遞修改內容，從而達到永久性修改
$.ajax({
type: "post",
url: basePath+"/banner/updateBanner.do",
data: {
id:row.id,
sortNum:row.sortNum
},
dataType: 'JSON',
success: function (data) {
if (JSON.parse(data.code)>0) {
layer.msg('更新數據成功');
}
},
error: function () {
layer.msg('編輯失敗');
},
complete: function () {
}
});
}修改源碼使id連續
分頁時，該插件本身每頁id是不連續的，每頁都是從1開始，若是每頁10條，第二頁想從11開始，則需要修改bootstrap-table.js源碼，具體操作如下。不想修改的可從下面下載本站提供的1.11.1版本的js，css等請自行從github等地下載。
注：該解決方法來源網絡，時間有點久，忘了具體是哪了。。
1.修改allowedMethods
在bootstrap-table.js中查找allowedMethods數組，在該數組中添加'getPage'，如圖：
2.添加getPage方法
BootstrapTable.prototype.getPage = function (params) {
return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};
};3.更改頁面調用時的id展示方式
如上面初始化時改寫的一樣
{
field: 'id',
title: 'ID',
visible: true,
formatter : function(value, row, index) {
//return index + 1;
var page = postsTale.bootstrapTable("getPage");
return page.pageSize * (page.pageNumber - 1) + index + 1;
}
}