有向无环图转换为Excel再到网页呈现

首先我们需要从后端读取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!")
                }
            }
        });

最终结果展示：