首先我们需要从后端读取Excel然后做一次数据过滤:
主要是去除空行以及空列,然后将数据结构转换为二位列表以合理的方式传递到前端
>>> import pandas as pd
>>> df = pd.read_excel('test.xlsx')
>>> df
a Unnamed: 1 b d Unnamed: 4 Unnamed: 5
0 NaN NaN NaN g i x
1 NaN NaN c d NaN NaN
2 NaN NaN e ox NaN NaN
3 NaN NaN NaN wer ooo1 NaN
4 NaN NaN NaN NaN NaN NaN
5 NaN NaN good good1 good11 good111
6 NaN NaN NaN NaN good12 NaN
7 NaN NaN NaN good2 good21 NaN
8 NaN NaN NaN good3 NaN NaN
>>> dropcolumns = []
>>> get_all_empty = data.any()
>>> for k, v in get_all_empty.iteritems():
... if not v and k.startswith('Unnamed'):
... dropcolumns.append(k)
...
>>> dropcolumns
['Unnamed: 1']
>>> data = df.drop(columns=dropcolumns)
>>> data
a b d Unnamed: 4 Unnamed: 5
0 NaN NaN g i x
1 NaN c d NaN NaN
2 NaN e ox NaN NaN
3 NaN NaN wer ooo1 NaN
4 NaN NaN NaN NaN NaN
5 NaN good good1 good11 good111
6 NaN NaN NaN good12 NaN
7 NaN NaN good2 good21 NaN
8 NaN NaN good3 NaN NaN
>>> drop_row = data.any(axis='columns')
>>> drop_row
0 True
1 True
2 True
3 True
4 False
5 True
6 True
7 True
8 True
dtype: bool
>>> dropr = []
>>> for k, v in drop_row.iteritems():
... if not v:
... dropr.append(k)
...
>>> dropr
[4]
>>> df = data.drop(dropr)
>>> df
a b d Unnamed: 4 Unnamed: 5
0 NaN NaN g i x
1 NaN c d NaN NaN
2 NaN e ox NaN NaN
3 NaN NaN wer ooo1 NaN
5 NaN good good1 good11 good111
6 NaN NaN NaN good12 NaN
7 NaN NaN good2 good21 NaN
8 NaN NaN good3 NaN NaN
>>> result = []
>>> result.append(list(data.columns))
>>> result
[[u'a', u'b', u'd', 'Unnamed: 4', 'Unnamed: 5']]
>>> for item in df.values:
... result.append(list(item))
...
>>> result
[[u'a', u'b', u'd', 'Unnamed: 4', 'Unnamed: 5'], [nan, nan, u'g', u'i', u'x'], [nan, u'c', u'd', nan, nan], [nan, u'e', u'ox', nan, nan], [nan, nan, u'wer', u'ooo1', nan], [nan, u'good', u'good1', u'good11', u'good111'], [nan, nan, nan, u'good12', nan], [nan, nan, u'good2', u'good21', nan], [nan, nan, u'good3', nan, nan]]
>>> len(result)
9
假如说我们的后端是使用python传递数据:
return json_response({'data': result, 'status': 'Success', 'cols': cols, 'rows': rows})
然后前端接收数据做处理(功能为主,代码不能说好):
$.ajax({
type: "POST", //提交方式
url: "/some_url",//路径
data: null,//数据
// data: conditions,//数据
dataType: 'json',
contentType: "application/json;charset=utf-8",
success: function (result) {//返回数据根据结果进行相应的处理
if (result.status=='Success'){
tmpdata = result.data//JSON.parse(result.data)
var cols = result.cols
var rows = result.rows
var table = '<table>'
var resultDict = {}
var colNo = 0
//以下做了行列中部分空值的处理
for(var row=0;row<rows;row++){
var flag = false
var colPos = cols
for(var col=0;col<cols;col++){
var text = tmpdata[row][col]
if(text!=null && text!=undefined){
if(text.toString().indexOf('Unnamed') >=0){
tmpdata[row][col] = -1
continue
}
flag = true
continue
}
if(flag == true && text==null){
tmpdata[row][col] = -1
}
}
for(var col=cols-1;col>=0;col--){
var text = tmpdata[row][col]
if(text!=null && text!=undefined && text!=-1){
tmpdata[row][col]=[text,colPos-col]
colPos = col
continue
}
}
}
//return false
for(var col=cols-1;col>=0;col--){
rowPos = rows
var tmprow = 0
for(var row=rows-1;row>=0;row--){
var text = tmpdata[row][col]
if(text && typeof(text)=="object"){
if(col == cols-1){
tmpdata[row][col].push(1)
}else{
tmpdata[row][col].push(rowPos-row)
}
rowPos = row
}
if(text == -1){
rowPos -= 1
}
}
}
var alltr = '';
#行列遍历确定跨行以及跨列的属性值,因为上一步中数据结构的处理,现在在遍历的时候行遇到空则代表后面数据为空,根据行参确定最后的跨格,列如果遇到-1则说明结束,然后记录到遇到-1经历的step来确定跨行的参数值
for(var row=0;row<rows;row++){
var halo='<tr>'
for(var col=0;col<cols;col++){
var vas = tmpdata[row][col]
if(vas && vas != -1){
let ll = vas[1]
let rr = vas[2]
var sliceNo = -(ll*15+rr*3)
if(ll >1){rr = 1}
var fullValue = vas[0]
if(typeof(fullValue) == "number"){
if(fullValue <1){
fullValue = (fullValue*100).toFixed(4)+'%'
ll = 1
}
}
var valueshow = fullValue
if(fullValue.length >6-sliceNo){
valueshow=fullValue.slice(0,6)+'..'+fullValue.slice(sliceNo)
}
halo += '<td title="'+ vas[0]+'" rowspan="'+rr+'" colspan="'+ll+'">'+valueshow+'</td>'
}
}
alltr += halo+'</tr>'
}
table += alltr+'</table>'
$('#table_cards').html(table)
}
else {
alert("Ooops! Data Hijacked by Aliens!")
}
}
});
最终结果展示: