dgrid 水平滚动

3
我有一个dgrid表格用来展示包含许多列的数据。dgrid默认的布局方式会使得所有列都可见,这意味着它们会被折叠起来,因此无法看到每列的完整标题或数据。
我想展示所有列以查看它们所包含的所有数据和标题信息,然后我需要一个水平滚动条来横向滚动查看所有列。通过将dgrid-row-table的默认布局从"table-layout: fixed"更改为"table-layout: auto",我能够实现这一点,但是列没有对齐。
是否有一种方法可以使用带有许多列和水平滚动条的"dgrid/OnDemandGrid"?
2个回答

1

我解决问题的方法没有使用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容器将具有滚动条。

希望这能帮到您。


1

dGrid可以直接支持此功能。你只需要为dgrid设置宽度,并为每一列设置最小宽度即可。如果列的宽度大于dgrid的宽度,它将在水平方向上滚动:

JS Fiddle 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


你在fiddle中提到了CSS文档,能否包含一个链接?我正在尝试让我的dgrid自动调整高度,这让我疯狂! - streetlight
1
@streetlight 这个案例是关于水平滚动的。有关自动高度,请参见http://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/。 - David Wilton

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接