背景

先說說為什么要弄什么行轉(zhuǎn)列。

費勁的弄出表格，才發(fā)現(xiàn)，弄成了每天的水電費，不過是測試數(shù)據(jù)，不要在意這些細節(jié)。

很多時候我們就通過sql語句在數(shù)據(jù)庫中查詢到如上數(shù)據(jù)，那么展現(xiàn)到頁面的時候，勢必要變成下面一種格式。

那我們循環(huán)來生成table的html吧。

有些善于提問的朋友可能會問到，既然要這樣顯示，那么可以把電費和水費作為列存儲在table中啊。這里不多討論這個話題，因為中國的收費越來越多，物業(yè)費、保護費、稅收、天然氣等等各種名目......

因此才希望無論費用類別有多少種，都能把它自動轉(zhuǎn)換成列名信息，以表格形式呈現(xiàn)在用戶面前。

實現(xiàn)

實現(xiàn)起來很簡單，指定主鍵字段，用來作為列名的字段，值字段，對應上面的實例依次為 "時間",“類別”,"費用"。

主要思路則是，遍歷JSON，取到每一行的類別的值，作為列名存儲。

這里增加了一個默認值，意在解決數(shù)據(jù)不完整的問題。

再次用下上面的實例，正確的做法是每天都會對水表和電表進行抄表計算費用，那么萬一哪天沒寫怎么辦，那轉(zhuǎn)換后該結(jié)構(gòu)不是不完整了嗎，比如2014-07-09號只有電費，連水費這一行數(shù)據(jù)都沒有，因此在轉(zhuǎn)換成功后，特意檢測了是否存在這樣的情況，如果存在，則設置默認值。

/* json數(shù)據(jù)行列轉(zhuǎn)換  
     * @jsonData json數(shù)據(jù)源  
     * @idField  條件字段  
     * @colField 生成列名的字段  
     * @valueField 生成值的字段  
     * @emptyValue 默認值 避免有些數(shù)據(jù)不全  
    */ 
    function row2col(jsonData, idField, colField, valueField, emptyValue) {  
        var result = [], //存儲返回的數(shù)據(jù)  
            idIndexData = {},//存儲id在數(shù)組中的信息(位置)  
            resultColumns = {},//存儲列名數(shù)據(jù)  
            curRecord = null;//存儲當前數(shù)據(jù)  
 
        var colFields = colField.split(','); //  
 
        // 循環(huán)整個JSON數(shù)組：[{...},{...},{...},...]    
        for (var idx = 0; idx < jsonData.length; idx++) {  
 
            //當前json數(shù)據(jù)對象  
            var cdata = jsonData[idx];  
 
            //根據(jù)主鍵值，查找到結(jié)果數(shù)組中的索引號  
            var idValue = cdata[idField];  
            var num = idIndexData[idValue];//獲取存儲該id的數(shù)組索引號  
            if (num != null) {  
                curRecord = result[num];  
            } else {  
                //初始化數(shù)據(jù)時保持完整的結(jié)構(gòu)信息 避免因為缺乏數(shù)據(jù)，缺乏指定的列數(shù)據(jù)  
                curRecord = {};  
            }  
 
            // 指定的colFields列下的數(shù)據(jù)作為y軸，則取出該列的數(shù)據(jù)作為y軸即可  
            for (var i in colFields) {  
                var key = colFields[i];  
 
                //獲取到colField的值，作為列名  
                var value = cdata[valueField];  
                curRecord[value] = cdata[key];  
 
                //存儲列名  
                resultColumns[value] = null;  
                break;  
            }  
 
            //除數(shù)據(jù)內(nèi)容外，還需要添加主鍵數(shù)據(jù)    
            curRecord[idField] = idValue;  
 
            //對象若為新建 則新增進數(shù)組  
            if (num == null) {  
                idIndexData[idValue] = result.push(curRecord) - 1;  
            }  
        }  
 
        //數(shù)據(jù)檢查 由于是將行數(shù)據(jù)作為列名，則可能會存在部分行缺少其他列數(shù)據(jù)，若缺少，則指定默認值  
        for (var i in result) {  
            for (var name in resultColumns) {  
                if (!result[i].hasOwnProperty(name)) result[i][name] = emptyValue;  
            }  
        }  
        return result;  
    } 

完整示例下載