⼿把⼿教你--BootstrapTable表格插件的使⽤及数据导出（可导出Excel200。。
。
1.介绍
2.页⾯引⽤
为了⽅便bootstrap及bootstrap-table⽤官⽅推荐引⽤⽅式，想⾃⼰下载源码可以⾃⾏下载.
导出所需额外的4个js可从以下2个地址到那4个⽂件，不需要导出的可以⽆视.
<!-- 引⼊bootstrap样式 -->
html js 循环<link href="cdn.bootcss/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引⼊bootstrap-table样式 -->
<link href="cdn.bootcss/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery及bootstrapjs -->
<script src="cdn.bootcss/jquery/2.2.3/jquery.min.js"></script>
<script src="cdn.bootcss/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="cdn.bootcss/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引⼊中⽂语⾔包 -->
<script src="cdn.bootcss/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- bootstrap-table-export数据导出---后⾯两个是Excel2007所需要的js -->
<script src="${basePath }/js/bootstrap-table-export.js"></script>
<script src="${basePath }/js/tableExport.min.js"></script>
<script src="${basePath }/in.js"></script>
<script src="${basePath }/js/FileSaver.min.js"></script
3.简单⽰例
3.1在html中定义⼀个table标签
<table id="table"></table>
3.2使⽤bootstrap-table有两种⽅式，第⼀种是：通过data属性的⽅法--因为不灵活不做过多演⽰.类似
<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
3.3使⽤JavaScript⽅式,⼏乎所有使⽤bootstrap-table的全是以这种⽅式，学习bootstrap-table，就是学习它的API，介绍基本常⽤的API，详情请查看官⽅⽂档或看这个博主翻译的
页⾯引⼊以下js
$("#table").bootstrapTable({ // 对应table标签的id
url: base_path + "/product/list", //AJAX获取表格数据的url
striped: true, //是否显⽰⾏间隔⾊(斑马线)
pagination: true, //是否显⽰分页（*）
sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页（*）
paginationLoop: false, //当前页是边界时是否可以继续按
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这⾥添加额外的查询参数，返回false则终⽌请求
return {
limit: params.limit, // 每页要显⽰的数据条数
limit: params.limit, // 每页要显⽰的数据条数
offset: params.offset, // 每页显⽰数据的开始⾏号
//sort: params.sort, // 要排序的字段
//sortOrder: der, // 排序规则
//dataId: $("#dataId").val() // 额外添加的参数
}
},//传递参数（*）
pageNumber:1, //初始化加载第⼀页，默认第⼀页
pageSize: 10, //每页的记录⾏数（*）jquery下载文件插件
pageList: [10, 25, 50, 100,'all'], //可供选择的每页的⾏数（*）
contentType: "application/x-www-form-urlencoded",//⼀种编码。在post请求的时候需要⽤到。这⾥⽤的get请求，注释掉这句话也能拿到数据 //search: true, //是否显⽰表格搜索，此搜索是客户端搜索，不会进服务端，所以，个⼈感觉意义不⼤
strictSearch: false, //是否全局匹配,false模糊匹配
showColumns: true, //是否显⽰所有的列
showRefresh: true, //是否显⽰刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启⽤点击选中⾏
//height: 500, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度
//uniqueId: "id", //每⼀⾏的唯⼀标识，⼀般为主键列
showToggle:true, //是否显⽰详细视图和列表视图的切换按钮
cardView: false, //是否显⽰详细视图
detailView: false, //是否显⽰⽗⼦表
cache: false, // 设置为 false 禁⽤ AJAX 数据缓存，默认为true
sortable: true, //是否启⽤排序shell是什么机油
sortOrder: "asc", //排序⽅式
sortName: 'sn', // 要排序的字段
columns: [
{
field: 'sn', // 返回json数据中的name
title: '订货号', // 表格表头显⽰⽂字
align: 'center', // 左右居中
中国大学生慕课appvalign: 'middle' // 上下居中
}, {
field: 'productname',
title: '商品名称',
align: 'center',
valign: 'middle'
}, {
field: 'cost',
title: '价格(¥)',
align: 'center',
valign: 'middle',
sortable:true
}, {
field: 'brankname',
title: '品牌',
align: 'center',
valign: 'middle',
}, {
field: 'specificationvalues',
title: '规格',
align: 'center',
valign: 'middle',
}, {
field: 'areaname',
title: '产地',
align: 'center',
valign: 'middle',
}
],
onLoadSuccess: function(){ //加载成功时执⾏
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执⾏
console.info("加载数据失败");
},
},
//>>>>>>>>>>>>>>导出excel表格设置
showExport: phoneOrPc(), //是否显⽰导出按钮(此⽅法是⾃⼰写的⽬的是判断终端是电脑还是⼿机，电脑则返回true,⼿机返回falsee,⼿机不显⽰按钮)
exportDataType: "basic", //basic', 'all', 'selected'.
exportTypes:['excel','xlsx'], //导出类型
//exportButton: $('#btn_export'), //为按钮btn_export 绑定导出事件⾃定义导出按钮(可以不⽤)
exportOptions:{
//ignoreColumn: [0,0], //忽略某⼀列的索引
fileName: '数据导出', //⽂件名称设置
worksheetName: 'Sheet1', //表格⼯作区名称
tableName: '商品数据表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
}
//导出excel表格设置<<<<<<<<<<<<<<<<
});
/*判断终端是⼿机还是电脑--⽤于判断⽂件是否导出(电脑需要导出)*/
function phoneOrPc(){
var sUserAgent = LowerCase();
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) {html网站变灰
return false;
} else {
return true;
}
}
需要注意的项
1.测试时分页先选择'client'，因为分页是客户端的话，导出数据会⽅便可以随意定义'basic', 'all', 'selected'.如果分页是服务端的话即使选择'all 导出的也是当前页('basic')，如果想导出全部话，可以先将页⾯显⽰条⽬数为全部，再导出当前页即就是全部数据了.
2.分页如果是服务端的话返回的json串必须包含2个数据,⼀个是"total"即所有数据条数.另⼀个"rows"即"当前页"显⽰的内容.(见下图json串格式)
后台参考代码(以服务端分页为例，如果客户端分页先把⽅法参数去掉，再把for循环改成循环100次，后直接返回list即可)
@Controller
@RequestMapping("/product")
public class TestController {
@RequestMapping("/list")
@ResponseBody
public Map<String,Object> listProduct(@RequestParam(value = "limit", required = false)Integer limit, @RequestParam(value = "offset", required = false)Int eger offset) {
Map<String,Object> map = new HashMap<>();
List<SkuExt> list = new ArrayList<SkuExt>();//此处应该是从数据库查出来的数据，为了测试⽅便写个循环
for (int i = offset; i < limit+offset; i++) {
SkuExt skuExt = new SkuExt();
skuExt.setSn(i+"");
skuExt.setProductname("商品名称"+i);
skuExt.setCost(new BigDecimal(i*100));
skuExt.setBrankname("品牌名称"+i);
skuExt.setSpecificationvalues("规格值是"+i);
skuExt.setAreaname("产地"+i);
list.add(skuExt);
}
map.put("total", 100);//假设共有100条数据
map.put("rows", list);
异步传输模式的优点return map;
}
--------------------------------------以上就是代码，效果如下------------------------------------------
showToggle:true这个属性的效果如下:
导出按钮效果如下：导出的按钮和下拉提⽰应该不是这样，是我⾃⼰改了⾥⾯内容⽂字，很好实现.
以上，纯⼿写,⼤神勿喷.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论