項目中遇到,記錄一下。
需要引入兩個js
這兩個js隻是針對導出資料用到的js,bootstrapTable基礎的js也是需要引入的
//<!-- bootstrap-table-export -->
<script type="text/javascript" src="../js/bootstrap-table-export.js"></script>
<script type="text/javascript" src="../js/tableExport.js"></script>
bootstrap-table-export.js.提取碼:u2cp
tableExport.js.提取碼:ty2y
初始化配置
var myTable = $('#assetsBank_table').bootstrapTable({
url : url, // AJAX擷取表格資料的url
striped : true, // 是否顯示行間隔色(斑馬線)
method:'post',//post請求需要配置contentType,預設是get請求不需要配置
pagination : true, // 是否顯示分頁(*)
sidePagination : "client", // 分頁方式:client用戶端分頁,server服務端分頁(*)
paginationLoop : true, // 目前頁是邊界時是否可以繼續按
queryParams : function(params) { // 請求伺服器資料時發送的參數,可以在這裡添加額外的查詢參數,傳回false則終止請求
return {
id: assetTypeId//傳給接口的參數
}
},// 傳遞參數(*)
pageNumber : 1, // 初始化加載第一頁,預設第一頁
pageSize : 3, // 每頁的記錄行數(*)
pageList : [ 10, 25, 50, 100, 'all' ], // 可供選擇的每頁的行數(*)
contentType : "application/x-www-form-urlencoded",// 一種編碼。在post請求的時候需要用到。這裡用的get請求,注釋掉這句話也能拿到資料
search : true, // 是否顯示表格搜尋,此搜尋是用戶端搜尋,不會進服務端,是以,個人感覺意義不大
strictSearch : false, // 是否全局比對,false模糊比對
showColumns : true, // 是否顯示選擇展示那一列的哪個按鈕
toolbar : '#toolbar',
showRefresh : false, // 是否顯示重新整理按鈕
minimumCountColumns : 2, // 最少允許的列數
clickToSelect : true, // 是否啟用點選選中行
height: 500,
// //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
uniqueId : "atrrId", // 每一行的唯一辨別,一般為主鍵列
showToggle : false, // 是否顯示詳細視圖和清單視圖的切換按鈕
cardView : false, // 是否顯示詳細視圖
detailView : false, // 是否顯示父子表
cache : true, // 設定為 false 禁用 AJAX
sortable : false, // 是否啟用排序
sortOrder : "asc", // 排序方式
sortName : 'atrrId', // 要排序的字段
columns : [
{
checkbox: true,//複選框
singleSelect:true//這個好像是可不可以擷取選中資料,如果需要擷取選中行資料的話這個要設定成true
},{
field : 'assetsId', // 傳回json資料中的name
title : 'id', // 表格表頭顯示文字
align : 'center', // 左右居中
valign : 'middle', // 上下居中
visible : false //是否顯示,true為顯示
}, {
field : 'assetsName',
title : '資産名稱',
align : 'center',
valign : 'middle'
}, {
field : 'ip',
title : 'IP位址',
align : 'center',
valign : 'middle'
}, {
field : 'mac',
title : 'MAC位址',
align : 'center',
valign : 'middle'
}, {
field : 'inServiceTime',
title : '過保時間',
align : 'center',
valign : 'middle',
formatter:function(value){//過濾,value是傳回的對象中這個屬性的值
if(value == null){
return '已過保'
}
}
}],
onLoadSuccess: function () {
//加載成功執行
},
onLoadError: function () {
//加載失敗執行
},
onClickRow: function (row, $element) {//bootstrapTable行點選事件
//點選某行時執行
},
showExport: phoneOrPc(),//是否顯示導出按鈕(此方法是自己寫的目的是判斷終端是電腦還是手機,電腦則傳回true,手機傳回falsee,手機不顯示按鈕)
exportDataType: "all",//basic', 'all', 'selected'.
exportTypes: ['excel', 'xlsx'],//導出類型
//exportButton: $('#btn_export'),//為按鈕btn_export 綁定導出事件 自定義導出按鈕(可以不用)
exportOptions: {
ignoreColumn: [0,1,2],//忽略某一列的索引,可以選擇多個列
fileName: '導出資料',//檔案名稱設定
worksheetName: 'Sheet1',//表格工作區名稱
tableName: '裝置清單',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
}
});
判斷終端是手機還是電腦方法
function phoneOrPc(){
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
return false;
} else {
return true;
}
}