背景

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

時(shí)間	類(lèi)別	費(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)，不過(guò)是測(cè)試數(shù)據(jù)，不要在意這些細(xì)節(jié)。

很多時(shí)候我們就通過(guò)sql語(yǔ)句在數(shù)據(jù)庫(kù)中查詢到如上數(shù)據(jù)，那么展現(xiàn)到頁(yè)面的時(shí)候，勢(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)來(lái)生成table的html吧。

有些善于提問(wèn)的朋友可能會(huì)問(wèn)到，既然要這樣顯示，那么可以把電費(fèi)和水費(fèi)作為列存儲(chǔ)在table中啊。這里不多討論這個(gè)話題，因?yàn)橹袊?guó)的收費(fèi)越來(lái)越多，物業(yè)費(fèi)、保護(hù)費(fèi)、稅收、天然氣等等各種名目......

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

實(shí)現(xiàn)

實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，指定主鍵字段，用來(lái)作為列名的字段，值字段，對(duì)應(yīng)上面的實(shí)例依次為 "時(shí)間",“類(lèi)別”,"費(fèi)用"。

主要思路則是，遍歷JSON，取到每一行的類(lèi)別的值，作為列名存儲(chǔ)。

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

再次用下上面的實(shí)例，正確的做法是每天都會(huì)對(duì)水表和電表進(jìn)行抄表計(jì)算費(fèi)用，那么萬(wàn)一哪天沒(méi)寫(xiě)怎么辦，那轉(zhuǎn)換后該結(jié)構(gòu)不是不完整了嗎，比如2014-07-09號(hào)只有電費(fèi)，連水費(fèi)這一行數(shù)據(jù)都沒(méi)有，因此在轉(zhuǎn)換成功后，特意檢測(cè)了是否存在這樣的情況，如果存在，則設(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 = [], //存儲(chǔ)返回的數(shù)據(jù)    
              idIndexData = {},//存儲(chǔ)id在數(shù)組中的信息(位置)    
              resultColumns = {},//存儲(chǔ)列名數(shù)據(jù)    
              curRecord = null;//存儲(chǔ)當(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ù)對(duì)象    
              var cdata = jsonData[idx];    
     
              //根據(jù)主鍵值，查找到結(jié)果數(shù)組中的索引號(hào)    
              var idValue = cdata[idField];    
              var num = idIndexData[idValue];//獲取存儲(chǔ)該id的數(shù)組索引號(hào)    
              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];    
     
                  //存儲(chǔ)列名    
                  resultColumns[value] = null;    
                  break;    
              }    
     
              //除數(shù)據(jù)內(nèi)容外，還需要添加主鍵數(shù)據(jù)      
              curRecord[idField] = idValue;    
     
              //對(duì)象若為新建 則新增進(jìn)數(shù)組    
              if (num == null) {    
                  idIndexData[idValue] = result.push(curRecord) - 1;    
              }    
          }    
     
          //數(shù)據(jù)檢查 由于是將行數(shù)據(jù)作為列名，則可能會(huì)存在部分行缺少其他列數(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;    
      }

完整示例下載

新聞名稱(chēng)：JSON數(shù)據(jù)行轉(zhuǎn)列的應(yīng)用附完整示例下載
新聞來(lái)源：http://fisionsoft.com.cn/article/cdcoijs.html

新聞中心

背景

實(shí)現(xiàn)

其他資訊