bootstrap-table 學習心得
阿新 • • 發佈：2018-12-29
一、bootstrap-table使用基礎-----必要的引入
<!--樣式檔案--> <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <link href="assets/bootstrap-table-develop/src/bootstrap-table.css" rel="stylesheet"> <!--js檔案--> <script src="js/jquery-2.2.4.js"></script> <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="assets/bootstrap-table-develop/src/bootstrap-table.js"></script> <script src="assets/bootstrap-table-develop/src/bootstrap-table-zh-CN.js"></script> <!-- 自己封裝的包含分頁和資料請求的初始化 --> <script src="assets/bootstrap-table-develop/src/bootstrap-table-common.js"></script><script src="assets/bootstrap-table-develop/src/bootstrap-table-common.js"></script>
/** * @author : * version : * description :Encapsulation of common table content * 引數說明：id :bootstrap-table id * url :資料請求url * queryParams : * pagination : 是否顯示分頁 * strictSearch: 是否顯示搜尋 */ // 初始化表格 function initTable(id, url, queryParams, pagination, strictSearch) { //先銷燬表格 $('#' + id).bootstrapTable('destroy'); //初始化表格,動態從伺服器載入資料 $("#" + id).bootstrapTable({ method : "get", // 使用get請求到伺服器獲取資料 url : url, // 獲取資料的Servlet地址 toolbar : '#toolbar', // 工具按鈕用哪個容器 cache : false, // 是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） striped : true, // 表格顯示條紋 pagination : pagination, // 啟動分頁 pageSize : 15, // 每頁顯示的記錄數 pageNumber : 1, // 當前第幾頁 search : true, // 是否啟用查詢 strictSearch : strictSearch, // 查詢 showRefresh : true, // 顯示重新整理按鈕 showToggle : false, // 是否顯示詳細檢視和列表檢視的切換按鈕 showColumns : true, // 顯示下拉框勾選要顯示的列 minimumCountColumns : 2, // 最少允許的列數 clickToSelect : true, // 是否啟用點選選中行 uniqueId : "ID", // 每一行的唯一標識，一般為主鍵列 cardView : false, // 是否顯示詳細檢視 detailView : false, // 是否顯示父子表 sidePagination : "server", // 表示服務端請求 queryParams : queryParams }); } // 刪除表格整行 function onRemove(rowId){ $('table').bootstrapTable('remove',{ fild: 'rowId', values: rowId }) }
二、表格渲染方式：
方式一：
<table class="table table-hover table-responsive table-bordered" id="cusTable"> <thead> <tr> <th data-field="checkbox" data-checkbox="true"></th> <th data-field="projectName">專案名稱</th> <th data-field="projectType" data-sortable="true">專案型別</th> <th data-field="PersonInCharge" data-sortable="true" data-width='200'>負責人</th> <th data-field="participants" data-sortable="true" data-width='160'>參與人數</th> <th data-field="stopTime" data-sortable="true" data-width='160'>專案結束時間</th> <th data-field="option" data-width='60' data-formatter="actionFormatter">操作</th> </tr> </thead> <tbody></tbody> </table> <script type="text/javascript"> $(document).ready(function () { initTable('cusTable', 'data/data.json', queryParams, true,true);
//data/data.json 的格式:rows:[],total:,為分頁狀態
});
var queryParams = function(params){
var param = {
pageNumber : params.offset,
pageSize : params.limit,
sortName : params.sort
};
if (params.sort) {
param.sortOrder = params.order;
}
return param;
}
// 定義操作按鈕
function actionFormatter(value, row, index) {
if (row.projectName=="考試系統") {
return [
'<a data-id="' + row.projectName + '" class="edit-action" href="javascript:void(0);" style="cursor:pointer;" title="編輯"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> ',
'<a data-id="' + row.projectName + '" class="trash-action" href="javascript:void(0);" onclick="onRemove('+row.projectName+')" title="刪除"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>'
].join('');
}else{
return [
'<a data-id="' + row.projectName + '" class="trash-action" href="javascript:void(0);" style="cursor:pointer;" title="刪除"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>'
].join('');
}
}
</script> 方式二：
<table class="table table-hover table-responsive table-bordered" id="table" data-url="data/data.json">
<thead>
<tr>
<th data-field="checkbox" data-checkbox="true"></th>
<th data-field="projectName">專案名稱</th>
<th data-field="projectType" data-sortable="true">專案型別</th>
<th data-field="PersonInCharge" data-sortable="true" data-width='200'>負責人</th>
<th data-field="participants" data-sortable="true" data-width='160'>參與人數</th>
<th data-field="stopTime" data-sortable="true" data-width='160'>專案結束時間</th>
<th data-field="option" data-width='60' data-formatter="actionFormatter">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#table").bootstrapTable({
//如不設定分頁那麼資料來源不需要totals和rows，只需要data就可以
pagination: true,
sidePagination: 'server' // 設定為伺服器端分頁
});
});
</script>
資料來源格式：
{
"total": 20,
"rows": [
{
"projectName": "考試系統",
"projectType": "研發類",
"PersonInCharge": "項..,劉..",
"participants": "8",
"stopTime":"2018-05-01 00:00:00",
"option":""
},
{
"projectName": "ERP",
"projectType": "研發類",
"PersonInCharge": "邵..,石..,張..,劉..",
"participants": "8",
"stopTime": "2017-09-30 00:00:00",
"option": ""
},
{
"projectName": "INS 2.0",
"projectType": "研發類",
"PersonInCharge": "項..,劉.",
"participants": "8",
"stopTime": "2017-12-31 00:00:00",
"option":""
},
{
"projectName": "考試系統",
"projectType": "研發類",
"PersonInCharge": "項..,劉..",
"participants": "8",
"stopTime": "2018-05-01 00:00:00",
"option":"刪除"
}
]
}