3

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

具有默认布局的表格

我想显示所有展开的列以查看其中包含的所有数据和标题信息。然后，我需要一个水平滚动条来横向滚动以查看所有列。我可以通过更改dgrid-row-tablefrom table-layout: fixedto的默认布局来做到这一点table-layout: auto，但是列没有对齐。

包含未对齐的完整列的表

有没有办法使用dgrid/OnDemandGrid多列和水平滚动？

4

2 回答 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 容器将具有滚动。

希望它会有所帮助。

于 2013-01-25T13:03:23.837 回答
1

dGrid 开箱即用地支持这一点。您需要做的就是为 dgrid 设置一个宽度并为每列设置一个最小值。如果列的宽度大于 dgrid 的宽度，它将水平滚动：

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

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

请记住，默认情况下 dgrid 的高度设置为 30em，因此您可能需要更改此设置，否则滚动可能会超出控件的底部。

您还可以在 dojo 测试中查看示例 http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

于 2014-03-31T08:30:29.343 回答