项目中有一个功能是选中一个Excel文件后,在页面中展示其内容,我们的列表数据都是使用Bootstrap Table展示的,于是就研究了一下怎么结合Bootstrap Table实现这个功能,最后终于搞定了,下面是实现代码
<div class="row" style="margin-left: 0px; margin-right: 5px;">
<div class="file-container" style="display:inline-block;position:relative;overflow: hidden;vertical-align:middle">
<button class="btn btn-mini btn-success fileinput-button" type="button">导入人员</button>
<input type="file" id="excel" onchange="loadFile(this.files[0])" style="position:absolute;top:0;left:0; opacity:0">
<span id="filename" style="vertical-align: middle">未上传文件</span>
</div>
<div>
<table id="dataGrid" class="table text-nowrap"></table>
</div>
</div>
<script type="text/javascript">
function loadFile(file){
$("#filename").html(file.name);
}
$(function() {
$('#dataGrid').bootstrapTable({
toolbar : '#toolbar',
height : 330,
striped : true,
pagination : true,
pageSize : 10,
// sortName : 'userName',
sidePagination : 'client',
columns : [
{
field : 'userName',
title : '用户名称'
},
{
field : 'userMobile',
title : '手机号'
},
{
title : "操作",
formatter : function(value, row, index){
var str = "";
str += "<a onclick='del(\"userPhone\", \"" + row.userPhone + "\");' "
+ "href='javascript:void(0);' class='btn btn-mini btn-danger' >"
+ "删除" + "</a>";
return str;
}
}
]
});
});
//删除一行数据
function del(field, value){
$('#dataGrid').bootstrapTable('remove', {field: field, values: [value]});
}
//加载数据
function loadData(rows) {
$('#dataGrid').bootstrapTable('load', rows);
}
</script>
<script type="text/javascript">
//捕捉文件组件更改事件, 如果文件发生改变, 就获取文件内容
$("#excel").change(function(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result,
workbook = XLSX.read(data, {
type: 'binary'
}), // 以二进制流方式读取得到整份excel表格对象
rows = []; // 存储获取到的数据
} catch (e) {
console.log('文件类型不正确' + e);
bootbox.alert('文件类型不正确');
return;
}
// 表格的表格范围,可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
rows = rows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break; // 如果只取第一张表,就取消注释这行
}
}
for(var i=0; i<rows.length; i++) {
rows[i].userName = rows[i].用户名称;
rows[i].userMobile = rows[i].手机号;
rows[i].userPhone = rows[i].用户名称 + rows[i].手机号;
}
//加载数据到表格
loadData(rows);
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
注:除了要引入bootstrap以及bootstrap table相关的js、css文件外,还需要引入专门用于处理excel文件的js插件 xlsx.core.min.js,点击进去右键网页另存为到本地,复制到项目中合适的文件夹,然后就可以引用了。
参考文章:
1、Bootstrap Table通过JS生成数据源并且加载到表格中,采用client方式分页
2、使用js-xlsx库,前端读取Excel报表文件
3、bootstrap改变上传文件按钮样式,并显示已上传文件名
最终效果如下
网友评论