BootstrapTable表格數據導出爲Excel格式

項目中遇到,記錄一下。

需要引入兩個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.提取碼:gqpj
tableExport.js.提取碼:2sbq

初始化配置

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; 
	}  
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章