dgrid с горизонтальной прокруткой

У меня есть dgrid, отображающий данные в таблице, содержащей много столбцов. Макет dgrid по умолчанию приводит к тому, что все столбцы видны на странице, что означает, что они свернуты, и невозможно увидеть полный заголовок или данные в каждом столбце.

Таблица с макетом по умолчанию

Я хотел бы показать все столбцы расширенными, чтобы увидеть все данные и информацию заголовка, содержащуюся в них. Затем мне понадобится горизонтальная полоса прокрутки для прокрутки вбок, чтобы просмотреть все столбцы. Я смог сделать это, изменив макет по умолчанию dgrid-row-table с table-layout: fixed на table-layout: auto, но тогда столбцы не выстроились в линию.

Таблица с полными столбцами, которые не выстраиваются в линию

Есть ли способ использовать dgrid/OnDemandGrid со многими столбцами и горизонтальной прокруткой?


css dojo dgrid
person Brian    schedule 24.01.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Мое решение не использует dgrid/OnDemandGrid, но все еще работает.

1/поместите свою сетку в контейнер следующим образом:

<div id="container">
    <div id="grid" style="width:100%;height:100%"></div>
</div>

2/установите ширину, высоту и прокрутку в вашем css:

#container{
    height: 200px;
    width: 800px;
    overflow: auto;
}

3/в структуре вашей сетки поместите элемент "width" в "auto":

var gridLayout = [  
                  {
                      defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: right;'  },
                      cells:    [
                                 { name: "ID"               , field: "id"           , width: "auto" },
                                 { name: "Reg."             , field: "reg"          , width: "auto", editable: true },
                                 { name: "Type"             , field: "type"         , width: "auto" }
                  ];

(Например)

Строки будут иметь размер, достаточный для отображения их самого большого содержимого, а контейнер div будет иметь прокрутку.

Надеюсь, это поможет.

person tufekoi    schedule 25.01.2013

arrow_upward
1
arrow_downward

dGrid поддерживает это из коробки. Все, что вам нужно сделать, это установить ширину для dgrid и установить минимум для каждого столбца. Если ширина столбцов больше ширины dgrid, он будет прокручиваться горизонтально:

JS-скрипт http://jsfiddle.net/e9jad/7/

 .dgrid-grid {
    width: 100%
 }
 .dgrid-cell {
    width: 400px;
 }

Имейте в виду, что высота dgrid по умолчанию установлена ​​​​на 30em, поэтому вы можете изменить это, или прокрутка может быть не в нижней части вашего элемента управления.

Также вы можете увидеть примеры в тестах додзё http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

person David Wilton    schedule 31.03.2014
comment
Вы упоминаете документы CSS в скрипте — можете ли вы включить ссылку? Я пытаюсь установить автоматическую высоту на своем dgrid, и это сводит меня с ума! - person streetlight; 22.05.2014
comment
@streetlight, этот случай касается горизонтальной прокрутки. Для автоматической высоты см. sitepen.com/blog/2012. /05/03/css-style-of-dgrid - person David Wilton; 26.05.2014