dgrid与水平滚动

我有一个dgrid在包含许多列的表中显示数据。 dgrid的默认布局会使所有列在页面上可见，这意味着它们已折叠并且无法在每列中看到完整的标题或数据。dgrid与水平滚动

Table with default layout

我想显示所有列扩大到看到所有包含在其中的数据和头信息。然后，我需要一个水平滚动条来侧向滚动查看所有列。我能够通过将dgrid-row-table的默认布局从table-layout: fixed更改为table-layout: auto来完成此操作，但是这些列未排列。

Table with full columns that don't line up

是否有使用dgrid/OnDemandGrid有许多列和水平滚动的方式？

来源

2013-01-24 Brian

我的解决方案不使用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 /在网格的结构放元件 “宽度” 为 “自动”：

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容器将滚动。

希望它会有所帮助。

来源

2013-01-25 13:03:23 tufekoi

这可以用dgrid做例子。看到我的回答如下 –

dGrid支持开箱即用。你所需要做的就是为dgrid设置一个宽度，并为每一列设置一个最小值。如果列的宽度比dgrid的宽度，将水平滚动：

JS小提琴 http://jsfiddle.net/e9jad/7/

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

记住dgrid的HIGHT被默认设置为30em所以你可能想要改变这个，或者滚动可能不在你的控制的底部。你

也可以看到在道场测试 http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

来源

2014-03-31 08:30:29

你提到CSS文件在小提琴 - 你能包括一个链接？我试图在我的dgrid上获得汽车高度，这让我疯狂！ – streetlight

@streetlight这种情况是关于水平滚动的。有关自动高度，请参阅http://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/ –

dgrid与水平滚动

回答

相关问题