Есть ли компонент таблицы данных JavaScript, который отображает столбцы в виде строк? - PullRequest
Новая
       28

Есть ли компонент таблицы данных JavaScript, который отображает столбцы в виде строк?

3 голосов
/ 13 августа 2010

Я хочу отобразить «перевернутую» (транспонированную) таблицу данных.Например, с учетом некоторых данных:

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

Отображается как

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

Строки должны работать так же, как столбцы в стандартной таблице.

Есть ли какой-нибудь компонент JS Ajax (например, YUI DataTable или аналогичный), который это делает?*

1 Ответ

2 голосов
/ 14 августа 2010

Хорошее упражнение.Я думаю, что это то, что вы хотите: 

<!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]]

Для этого функция проверяет, существует ли уже элемент массива (во внешнем массиве), содержащий ключ, чтобы она могла добавить значение в свою «строку» или сначала создала новый элемент во внешнем массиве с ключомв первом «столбце» и во втором значении.

Затем buildTable создает необходимый HTML-код, который можно вставить в каждый элемент, который может содержать таблицу.Кстати, эта функция использует массив html для временного хранения выходных данных и, в конце концов, объединяет все ее элементы, чтобы вернуть строку.Как правило, это быстрее, чем (почти) бесконечная конкатенация строки.

...