数据行转列的应用(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数据源),布布扣,bubuko.com

数据行转列的应用(json数据源)

上一篇:CSS实现兼容性的渐变背景(gradient)效果


下一篇:JQuery中$.ajax()方法参数详解 (转)