带水平滚动的dgrid

Posted 2021-04-15

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

我想展示所有扩展的列，以查看其中包含的所有数据和标题信息。然后，我需要一个水平滚动条来侧向滚动以查看所有列。我能够通过将dgrid-row-table的默认布局从table-layout: fixed更改为table-layout: auto来实现此目的，但是这些列没有排成一行。

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

答案

我的解决方案不使用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容器将具有滚动。

希望它会有所帮助。

另一答案

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

JS Fiddle http://jsfiddle.net/e9jad/7/

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

请记住，网格的高度默认设置为30em，因此您可能需要更改此项，或者滚动可能位于控件的底部。

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