建站
咨詢
售后
建站咨詢
新聞中心
背景
先說說為什么要弄什么行轉(zhuǎn)列。
| 時(shí)間 | 類別 | 費(fèi)用 |
| 2014-07-08 | 電費(fèi) | 120 |
| 2014-07-08 | 水費(fèi) | 23 |
| 2014-07-09 | 電費(fèi) | 44 |
| 2014-07-09 | 水費(fèi) | 77 |
| 2014-07-10 | 電費(fèi) | 45 |
| 2014-07-10 | 水費(fèi) | 21 |
| 2014-07-11 | 電費(fèi) | 34 |
| 2014-07-11 | 水費(fèi) | 27 |
費(fèi)勁的弄出表格，才發(fā)現(xiàn)，弄成了每天的水電費(fèi)，不過是測試數(shù)據(jù)，不要在意這些細(xì)節(jié)。
很多時(shí)候我們就通過sql語句在數(shù)據(jù)庫中查詢到如上數(shù)據(jù)，那么展現(xiàn)到頁面的時(shí)候，勢必要變成下面一種格式。
| 時(shí)間 | 電費(fèi) | 水費(fèi) |
| 2014-07-08 | 120 | 23 |
| 2014-07-08 | 44 | 77 |
| 2014-07-09 | 45 | 66 |
| 2014-07-09 | 43 | 77 |
| 2014-07-10 | 21 | 45 |
| 2014-07-10 | 54 | 21 |
| 2014-07-11 | 65 | 34 |
| 2014-07-11 | 65 | 27 |
那我們循環(huán)來生成table的html吧。
有些善于提問的朋友可能會問到，既然要這樣顯示，那么可以把電費(fèi)和水費(fèi)作為列存儲在table中啊。這里不多討論這個(gè)話題，因?yàn)橹袊氖召M(fèi)越來越多，物業(yè)費(fèi)、保護(hù)費(fèi)、稅收、天然氣等等各種名目......
因此才希望無論費(fèi)用類別有多少種，都能把它自動(dòng)轉(zhuǎn)換成列名信息，以表格形式呈現(xiàn)在用戶面前。
實(shí)現(xiàn)
實(shí)現(xiàn)起來很簡單，指定主鍵字段，用來作為列名的字段，值字段，對應(yīng)上面的實(shí)例依次為 "時(shí)間",“類別”,"費(fèi)用"。
主要思路則是，遍歷JSON，取到每一行的類別的值，作為列名存儲。
這里增加了一個(gè)默認(rèn)值，意在解決數(shù)據(jù)不完整的問題。
再次用下上面的實(shí)例，正確的做法是每天都會對水表和電表進(jìn)行抄表計(jì)算費(fèi)用，那么萬一哪天沒寫怎么辦，那轉(zhuǎn)換后該結(jié)構(gòu)不是不完整了嗎，比如2014-07-09號只有電費(fèi)，連水費(fèi)這一行數(shù)據(jù)都沒有，因此在轉(zhuǎn)換成功后，特意檢測了是否存在這樣的情況，如果存在，則設(shè)置默認(rèn)值。
- /* json數(shù)據(jù)行列轉(zhuǎn)換
- * @jsonData json數(shù)據(jù)源
- * @idField 條件字段
- * @colField 生成列名的字段
- * @valueField 生成值的字段
- * @emptyValue 默認(rèn)值 避免有些數(shù)據(jù)不全
- */
- function row2col(jsonData, idField, colField, valueField, emptyValue) {
- var result = [], //存儲返回的數(shù)據(jù)
- idIndexData = {},//存儲id在數(shù)組中的信息(位置)
- resultColumns = {},//存儲列名數(shù)據(jù)
- curRecord = null;//存儲當(dāng)前數(shù)據(jù)
- var colFields = colField.split(','); //
- // 循環(huán)整個(gè)JSON數(shù)組：[{...},{...},{...},...]
- for (var idx = 0; idx < jsonData.length; idx++) {
- //當(dāng)前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ù)時(shí)保持完整的結(jié)構(gòu)信息 避免因?yàn)槿狈?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;
- //對象若為新建 則新增進(jìn)數(shù)組
- if (num == null) {
- idIndexData[idValue] = result.push(curRecord) - 1;
- }
- }
- //數(shù)據(jù)檢查 由于是將行數(shù)據(jù)作為列名，則可能會存在部分行缺少其他列數(shù)據(jù)，若缺少，則指定默認(rèn)值
- for (var i in result) {
- for (var name in resultColumns) {
- if (!result[i].hasOwnProperty(name)) result[i][name] = emptyValue;
- }
- }
- return result;
- }
完整示例下載
網(wǎng)站標(biāo)題：JSON數(shù)據(jù)行轉(zhuǎn)列的應(yīng)用 附完整示例下載
文章鏈接：http://www.5511xx.com/article/cdcoijs.html
