Question

我有一个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？

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 /在您的网格结构中放置元素＆＃34;宽度＆＃34;到＆＃34;汽车＆＃34; ：

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

带水平滚动的dgrid

2 个答案: