数据行转列的应用（json数据源）

开发项目时有时会遇到将数据的行列进行转换。今天逛园子是看到一个很不错的方法。不需要在数据库中对数据进行行列转换，将数据集合转换长json格式使用如下代码即可。

<script>
    $(document).ready(function () {

        var jsonData = [
        { time: ‘2014-07-08‘, name: ‘电费‘, value: 120 },
        { time: ‘2014-07-09‘, name: ‘电费‘, value: 66 },
        { time: ‘2014-07-10‘, name: ‘电费‘, value: 88 },
        { time: ‘2014-07-11‘, name: ‘电费‘, value: 99 },
        { time: ‘2014-07-08‘, name: ‘水费‘, value: 120 },
        { time: ‘2014-07-09‘, name: ‘水费‘, value: 66 },
        { time: ‘2014-07-10‘, name: ‘水费‘, value: 88 },
        { time: ‘2014-07-11‘, name: ‘水费‘, value: 99 },
        { time: ‘2014-07-12‘, name: ‘水费‘, value: 75 }
        ];
        var colField = ‘value‘, valueField = ‘name‘, idField = ‘time‘;
        var resultData = row2col(jsonData, idField, colField, valueField, 0);
        alert(resultData.length);
        for (var i = 0; i < resultData.length; i++) {
            var tr = $("<tr></tr>");
            var td1 = $("<td></td>");
            var td2 = $("<td></td>");
            var td3 = $("<td></td>");
            td1.html(resultData[i][‘time‘]);
            td2.html(resultData[i][‘电费‘]);
            td3.html(resultData[i][‘水费‘]);
            tr.append(td1).append(td2).append(td3);
            tr.appendTo($("#aaa"));
        }
    });
    /* json数据行列转换
     * @jsonData json数据源
     * @idField  条件字段
     * @colField 生成列名的字段
     * @valueField 生成值的字段
     * @emptyValue 默认值 避免有些数据不全
    */
    function row2col(jsonData, idField, colField, valueField, emptyValue) {
        var result = [], //存储返回的数据
            idIndexData = {},//存储id在数组中的信息(位置)
            resultColumns = {},//存储列名数据
            curRecord = null;//存储当前数据

        var colFields = colField.split(‘,‘); //

        // 循环整个JSON数组：[{...},{...},{...},...]
        for (var idx = 0; idx < jsonData.length; idx++) {

            //当前json数据对象
            var cdata = jsonData[idx];

            //根据主键值，查找到结果数组中的索引号
            var idValue = cdata[idField];
            var num = idIndexData[idValue];//获取存储该id的数组索引号
            if (num != null) {
                curRecord = result[num];
            } else {
                //初始化数据时保持完整的结构信息 避免因为缺乏数据，缺乏指定的列数据
                curRecord = {};
            }

            // 指定的colFields列下的数据作为y轴，则取出该列的数据作为y轴即可
            for (var i in colFields) {
                var key = colFields[i];

                //获取到colField的值，作为列名
                var value = cdata[valueField];
                curRecord[value] = cdata[key];

                //存储列名
                resultColumns[value] = null;
                break;
            }

            //除数据内容外，还需要添加主键数据
            curRecord[idField] = idValue;

            //对象若为新建 则新增进数组
            if (num == null) {
                idIndexData[idValue] = result.push(curRecord) - 1;
            }
        }

        //数据检查 由于是将行数据作为列名，则可能会存在部分行缺少其他列数据，若缺少，则指定默认值
        for (var i in result) {
            for (var name in resultColumns) {
                if (!result[i].hasOwnProperty(name)) result[i][name] = emptyValue;
            }
        }
        return result;
    }

</script>

记得引入JQ文件。（原文地址）

数据行转列的应用（json数据源）