代码之家 › 专栏 › 技术社区 › pablochan

是否有将列显示为行的javascript数据表组件?

transpose datatable javascript

pablochan · 技术社区 · 15 年前

我想显示一个“翻转”(转置)数据表。例如,给出一些数据:

[{col1: "abc", col2: 123}, {col1: "xxx", col2: 321}]

它显示为

+------+-----+-----+
| col1 | abc | xxx |
+------+-----+-----+
| col2 | 123 | 321 |
+------+-----+-----+

行的作用应与标准表中的列相同。

是否有一些JSAjax组件(如yui datatable或类似的组件)执行此操作?

1 回复 | 直到 15 年前

Marcel Korpel 15 年前

很好的锻炼。我想这就是你想要的:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Transposed table</title>
</head>
<body>
  <div id="wrapper"></div>
  <script>
    var tableData = [{col1: "abc", col2: 123},
                     {col1: "xxx", col2: 321}];

    function rotateData(theTable) {
        var result = [], i, j, key, keyFound;

        for (i = 0; i < theTable.length; ++i) {
            for (key in theTable[i]) {
                /* now loop through result[] to see if key already exists */
                keyFound = false;

                for (j = 0; j < result.length; ++j) {
                    if (result[j][0] == key) {
                        keyFound = true;
                        break;
                    }
                }

                if (!keyFound) {
                    result.push([]);  // add new empty array
                    result[j].push(key);  // add first item (key)
                }

                result[j].push(theTable[i][key]);
            }
        }

        return result;
    }

    function buildTable(theArray) {
        var html = [], n = 0, i, j;

        html[n++] = '<table>';

        for (i = 0; i < theArray.length; ++i) {
            html[n++] = '<tr>';
            for (j = 0; j < theArray[i].length; ++j) {
               html[n++] = '<td>';
               html[n++] = theArray[i][j];
               html[n++] = '</td>';
            }
            html[n++] = '</tr>';
        }

        html[n++] = '</table>';
        return html.join('');
    }

    var rotated = rotateData(tableData);
    var tableHtml = buildTable(rotated);
    document.getElementById('wrapper').innerHTML = tableHtml;
  </script>
</body>
</html>

功能 rotateData 在数组中旋转对象的元素,以便获得类似

[["col1", "abc", "xxx"], ["col2", 123, 321]]

为此,函数将测试是否已存在包含键的数组元素(在外部数组中),以便将值添加到其“row”中,或者首先在外部数组中创建一个新元素,其中键在其第一个“column”中,值在第二个“column”中。

然后 buildTable 创建必要的HTML,该HTML可以插入到每个可以包含表的元素中。顺便说一句,该函数使用数组 html 临时存储输出,最后联接所有元素以返回字符串。这通常比(几乎)无休止地连接字符串要快。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前