BootstrapTable表格数据导出为Excel格式_bootstrap-table汇出excel-程序员宅基地

技术标签: BootStrapTable  js  BootStrap  javascript  jquery  

项目中遇到,记录一下。

需要引入两个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; 
	}  
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44657749/article/details/106069447

智能推荐

Java关键字学习_java文字学习-程序员宅基地

文章浏览阅读297次。Java关键字学习关键字的定义就是在java语言编程的时候,在关键的地方使用的单词,体现关键的地方的含义,这些单词都是特有的,事先定义好的。关键字的定义和特点定义:被java赋予了特殊含义,用做专门用途的单词。特点:关键字中所有字母都为小写用于定义数据类型的关键字名词名词解释class引用数据类型----类interface引用数据类型----..._java文字学习

三星手机安装linux系统下载,ubuntu手机系统安装教程【详细步骤】-程序员宅基地

文章浏览阅读1.7k次。导语: 看到这个题目大家可能不太清楚吧,现在随着科技技术的进步和大范围的普及,普通大众也渐渐掌握了各种新技术。对于手机换系统,大家应该都听说过,网上经常能够看到某某大神把 苹果 手机的 ios 系统刷成了安卓系统,把 小米 系统改成了苹果系统等等。而我们今天所要说的 ubuntu 手机系统安装也是这个原理,就是在我们手机上安装该系统。下面小编就来为大家介绍一下 ubuntu手机系统的安装教程 吧。...

Spring核心机制:依赖注入-程序员宅基地

文章浏览阅读2.2k次。Java应用(从applets的小范围到全套n层服务端企业应用)是一种典型的依赖型应用,它就是由一些互相适当地协作的对象构成的。因此,我们说这些对象间存在依赖关系。加入A组件调用了B组件的方法,我们就可以称A组件依赖于B组件。我们通过使用依赖注入,Java EE应用中的各种组件不需要以硬编码方式耦合在一起,甚至无需使用工厂模式。当某个Java 实例需要其他Java 实例时,系统自动提供所需要的

点云 3D 可视化 - Open3D 库_open3d库-程序员宅基地

文章浏览阅读6.7k次,点赞7次,收藏52次。点云 3D 可视化 - Open3D 库1. 文章信息2. Open3D 库简介2. 3D 可视化使用1. 文章信息(1)标题:Open3D: A Modern Library for 3D Data Processing (2018)(2)文章链接:https://arxiv.org/pdf/1801.09847.pdf(3)Open3D 库网址:http://www.open3d.org/2. Open3D 库简介Open3D 是一个开源库,支持快速开发处理 3D 数据的软件。Open3D_open3d库

C#的Http请求_c# http请求-程序员宅基地

文章浏览阅读619次。使用WebRequest,HttpWebResponse对象using System;using System.IO;using System.Net;using System.Text;namespace Enenya.Common{ public class HttpRequestResponse { public string GetH_c# http请求

别再迷茫了,熬夜肝了一份适合普通大学生的学习路线_大学生web开发学习路线-程序员宅基地

文章浏览阅读1.5w次,点赞318次,收藏1.2k次。说实话,对于学习路线这种文章我一般是不写的,大家看我的文章也知道,我是很少写建议别人怎么样怎么样的文章,更多的是,写自己的真实经历,然后供大家去参考,这样子,我内心也比较踏实,也不怕误导他人。但是,最近好多人问我学习路线,而且很多大一大二的,说自己很迷茫,看到我那篇 普普通通,我的三年大学 之后很受激励,觉得自己也能行,(是的,别太浪,你一定能行)希望我能给他个学习路线,说实话,几乎每天都有问这种问题的,鉴于此,我就来写一篇适合普通大众的学习路线,就从大一入学那一刻开始入门说起,虽然_大学生web开发学习路线

随便推点

EasyUI的DataGrid中url参数返回数据格式_datagrid url参数-程序员宅基地

文章浏览阅读1w次。数据网格(datagrid)是一个使用频繁的组件,在开发列表功能的时候都会用到,它有两种绑定数据的属性url和data。url是一个url链接,通过发送请求,返回需要的数据,这里强调的是一个数据格式,并不是返回什么样的数据都能显示。{total:'',rows:[{},{}]}total是总数表示总共有多少行数据,rows是那一页要显示的数据内容。data的数据格式如下,这个实际开发过程中很少用。d_datagrid url参数

我们在学习Spark的时候,到底在学习什么?_王知无 spark-程序员宅基地

文章浏览阅读422次。我必须要说,Spark这个框架出现之前,我对很多大数据领域的框架源码甚至都是嗤之以鼻的。很多小伙伴在群里或者私信留言问我关于Spark的学习路径问题。Spark发展至今,应该说已经非常成熟..._王知无 spark

OpenResty概念详细介绍,快速掌握Helloword_openrestr原理图-程序员宅基地

文章浏览阅读2.3k次。OpenResty概念讲解OpenResty介绍OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。OpenResty 通过汇聚各种设计精良的 Nginx 模块(主要由 OpenResty 团队自主开..._openrestr原理图

golang与linux服务器运维_golang 交换机运维-程序员宅基地

文章浏览阅读284次。读取dev.txt,cli.txt的内容,通过多并发进行连接linux服务器完成操控命令的执行,多用于运维或者开发管理多台服务器,基本相同的操作,通过这个代码就是可以完成操作linux以及多命令的执行事项。cli.txt文件内容:--linux命令行,都是存放在这里。备注:运行上述代码的方法,在所在程序的目录下命令行下运行。dev.txt--服务器信息。#init mod的初始方式。sshv2.go文件。_golang 交换机运维

【JAVA 工具】jstack简单使用,定位死循环、线程阻塞、死锁等问题_javacore 死循环-程序员宅基地

文章浏览阅读1.9w次,点赞6次,收藏24次。转载地址:http://www.cnblogs.com/chenpi/p/5377445.html当我们运行java程序时,发现程序不动,但又不知道是哪里出问题时,可以使用JDK自带的jstack工具去定位;废话不说,直接上例子吧,在window平台上的;死循环写个死循环的程序如下:package concurrency;public class Test _javacore 死循环

前端开发环境搭建-程序员宅基地

文章浏览阅读5.1k次,点赞5次,收藏51次。NodeJs篇一、下载安装nodeJS1、下载地址官方网址 NodeJs2、下载完成后,双击“node-v11.5.0-x64.msi”,开始安装Node.js,一路next,注意:安装目录看自己需求,本人安装在D:\nodejs目录下3、测试键盘按下【win+R】键,输入cmd 回车输入命令node -v 和 npm -v注意:新版的nodejs自带npm,可以理解npm就是对nodejs进行包管理,用于卸载和安装nodejs需要的东西4、在安装目录文件夹下创建node_cac_前端开发环境搭建

推荐文章

热门文章

相关标签