dojo 带水平滚动的dgrid

yrwegjxp 于 2022-12-16 发布在 Dojo

关注(0)|答案(2)|浏览(175)

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

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

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

dojo

来源：https://stackoverflow.com/questions/14510268/dgrid-with-horizontal-scroll

2条答案

按热度按时间

efzxgjgh1#

我的解决方案不使用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" }
                  ];

(for示例）
行的大小将足够大，以完全显示其最大的内容，并且div容器将具有scroll。
希望能有所帮助。

赞(0）回复(0）举报 2022-12-16

lyfkaqu12#

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

赞(0）回复(0）举报 2022-12-16

我来回答

dojo 带水平滚动的dgrid

2条答案

相关问题

热门标签

最新问答