今天要做一个报表导入并预览的功能,使用layui的文件上传,获取表格数据,接着把表格数据返回前台,使用bootstraptable展示,实现一个预览表格数据的效果。
// 数据经过处理后,真实数据已做修改
Data = [
{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "企业职工基本养老保险",ZFNL: 22.1},
{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "工伤保险",ZFNL: 22.1},
...
];
// field 需要和 Data中每个对象中的字段名对应。
//
$('#previewTable').bootstrapTable({
data : Data,
//toolbar: '#toolBar',
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,
//minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
columns: [
[
{field : 'XZ', title: '险种', rowspan:2, align:"center"},
{field : 'NCYE', title: '年初余额', rowspan:2,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.NCYE;
return num.toFixed(2);
}
},
{title: '基金收入', colspan:2,align:"center"},
{title: '基金支出', colspan:2,align:"center"},
{title: '当年收支结余', colspan:2,align:"center"},
{field : 'LJJY',title:'累计结余', rowspan:2,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.LJJY;
return num.toFixed(2);
}
},
{field : 'ZFNL',title: '支付能力(月)', rowspan:2,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.ZFNL;
return num.toFixed(1);
}
},
],
[
{field : 'JJSRBY',title:'本月', colspan:1,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.JJSRBY;
return num.toFixed(2);
}
},
{field : 'JJSRBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.JJSRBYLJ;
return num.toFixed(2);
}
},
{field : 'JJZCBY',title:'本月', colspan:1,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.JJZCBY;
return num.toFixed(2);
}
},
{field : 'JJZCBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.JJZCBYLJ;
return num.toFixed(2);
}
},
{field : 'SZYEBY',title:'本月', colspan:1,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.SZYEBY;
return num.toFixed(2);
}
},
{field : 'SZYEBYLJ',title:'本月止累计', colspan:1,halign:"center",align:"right",
formatter: function(value, row, index) {
let num = row.SZYEBYLJ;
return num.toFixed(2);
}
}
]
],
formatNoMatches : function() {
return ' 暂无数据 ';// 如果无数据则显示这个
}
});