带水平滚动的dgrid

Question

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

​

​

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

​

​

有没有一种方法可以使用具有多列和水平滚动的dgrid/OnDemandGrid？

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

希望这能有所帮助。

Answer 2

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中看到示例