Хорошие способы отображения длинных строк данных

Question

Мне нужно отображать записи информации из моей базы данных для моих пользователей. В настоящее время эта информация привязана к сетке данных. Однако полей для отображения слишком много, и мои таблицы исчезают со страницы. На самом деле я не хочу, чтобы на моих страницах была горизонтальная прокрутка, и я не хочу уменьшать размер шрифта ... поэтому мне было интересно, есть ли у кого-нибудь лучшие идеи для отображения длинных строк данных? Просто спросите, нужна ли какая-либо дополнительная информация, спасибо:)

Answer 1

Мое решение для чего-то подобного состоит в том, чтобы собрать наиболее важную информацию (все, что сразу же определит, о чем / о чём этот ряд) и поместить остальные в следующую строку в новую таблицу TD и внутреннюю таблицу. Скрыть / показать это с помощью JavaScript, и вы золотой.

Пример HTML

<tr>
    <td>Joe</td>
    <td>Jones</td>
    <td>555-555-5555 (m)</td>
    <td class="more">more..</td>
</tr>
<tr class='showme'>
    <td class='showthis' colspan="4">
        <h2>More info</h2>
        <table>
            <!-- yet more info here -->
        </table>
    </td>
</tr>

JQuery, чтобы заставить его работать

$("td.more").click(function(){
    // don't hide/show the next TR itself, may cause cross-browser issues
    $(this).closest("tr").next("tr.showme").find(".showthis").slideToggle();
});

Необходимый CSS

.showthis { display:none; }
/* you'll want to play with padding and such for open/close states, too */

Конечно, вы можете сделать его более сложным, но это основная функция.

Answer 2

Есть несколько способов. Во многом это зависит от данных.

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

2. Используйте маленькие иконки вместо слов где применимо Например, вместо «True» поставить небольшую галочку.

3. Используйте многоточие (...) для длинного текста с атрибут заголовка div, поэтому они видят полный текст при наведении мыши.

Answer 3

Горизонтальная прокрутка на странице - это дьявол! Но вы можете, по крайней мере, несколько сдержать его в этой ситуации, обернув GridView в div и включив горизонтальную прокрутку только для самого div (т.е. только для сетки).

<div style="overflow-x: auto;">
 //GridView
</div>

Answer 4

Я знаю, что вам не нравится идея горизонтальной прокрутки, но, возможно, если бы вы реализовали ее так, чтобы первые несколько значимых столбцов были зафиксированы / заморожены, горизонтальная прокрутка была бы менее раздражающей для пользователей?

Answer 5

Разделить данные на две строки.Постарайтесь сохранить его логичным, например, первый столбец первой строки будет «Имя», а первый столбец второго столбца будет «Фамилия».Тогда во втором столбце будет «адрес улицы» для первого ряда и «город, штат, почтовый индекс» для второго ряда.Etcetera.

В этом случае вам лучше будет использовать ListView вместо GridView.