天天看点

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.提取码: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; 
	}  
}
           

继续阅读