Bootstrap table學習
一、在頁面中引入相關文件。
Jquery.js
bootstrap.js bootstrap.css
Bootstrap-table.js bootstrap-table.css
二、編寫頁面
1．准備一個空表格
<div>
<table id=”table”></table>
</div>
2．編寫js
$('#table').bootstrapTable({
url: '/Home/GetDepartment', //請求后台的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況
//需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: function (params) { // 請求服務器數據時發送的參數，可以在這里添加額外的 // 查詢參數，返回false則終止請求
return {
pageSize: params.limit, // 每頁要顯示的數據條數
offset: params.offset, // 每頁顯示數據的開始行號
sort: params.sort, // 要排序的字段
sortOrder: params.order, // 排序規則
dataId: $("#dataId").val() // 額外添加的參數
}
sidePagination: "server", //分頁方式：client客戶端分頁，
server服務端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: true, //是否顯示表格搜索
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
height: 500, //行高，如果沒有設置height屬性，
//表格自動根據記錄條數覺得表格高度
uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部門名稱'
}, {
field: 'ParentName',
title: '上級部門'
}, {
field: 'Level',
title: '部門級別'
}, {
field: 'Desc',
title: '描述'
},{
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定義列的寬度，單位為像素px
formatter: function (value, row, index) {
return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">刪除</button>';
}
},
onLoadSuccess: function(){ //加載成功時執行
console.info("加載成功");
},
onLoadError: function(){
//加載失敗時執行
console.info("加載數據失敗");
}]
});
三、表格參數
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
... ...
});
四、列參數
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
columns: [
{
checkbox: true
}, {
title: '標准編號'
field: 'stdCode'
},
... ...
]
});
五、事件
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
onLoadSuccess: function(){ //加載成功時執行
console.info("加載成功");
},
onLoadError: function(){ //加載失敗時執行
console.info("加載數據失敗");
}
});
| Option 事件 |
jQuery 事件 |
參數 |
描述 |
| onLoadSuccess |
load-success.bs.table |
data |
請求加載遠程服務器數據成功時的事件 |
| onLoadError |
load-error.bs.table |
status |
請求加載遠程服務器數據失敗時的事件 |
| onClickRow |
click-row.bs.table |
|
|
| onDblClickRow |
dbl-click-row.bs.table |
row, $element |
當用戶雙擊某一行的時候觸發，參數包括： |
| onClickCell |
click-cell.bs.table |
|
|
| onDblClickCell |
dbl-click-cell.bs.table |
|
|
六、方法
使用方法的語法：$(‘#table’).bootstrapTable(‘method’, parameter);。
示例：
// 獲取表格所有已經勾選的行數據，為一個對象數組
var selects = $('#table').bootstrapTable('getSelections');
| 名稱(method) |
參數 |
描述 |
| getOptions |
none |
返回表格的 Options。 |
| getSelections |
none |
返回所選的行，當沒有選擇任何行的時候返回一個空數組。 |
| getAllSelections |
none |
返回所有選擇的行，包括搜索過濾前的，當沒有選擇任何行的時候返回一個空數組。 |
| load |
data |
加載數據到表格中，舊數據會被替換。 |
| append |
data |
添加數據到表格在現有數據之后。 |
| prepend |
data |
插入數據到表格在現有數據之前。 |
| insertRow |
params |
插入新行，參數包括：index: 要插入的行的 index。 |
| refresh |
params |
更新遠程服務器上的數據，可以設置{silent: true}來默認刷新，也可以設置{url: newUrl}來改變獲取數據的url接口，也支持設置請求的參數{query: {foo: ‘bar’}}，這點在表單查詢時很有用 |
| showLoading |
none |
顯示數據加載狀態 |
| hideLoading |
none |
隱藏數據加載狀態 |
| check |
index |
選擇一行，參數為行號，index從0開始 |
| uncheck |
index |
取消選擇一行，參數為行號，index從0開始 |
| destroy |
none |
銷毀一個表格，直接把整個table刪掉，需要重新開始渲染table |
| selectPage |
page |
跳到指定的頁。 |