带水平滚动的dgrid

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带水平滚动的dgrid相关的知识,希望对你有一定的参考价值。

我有一个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中看到示例

以上是关于带水平滚动的dgrid的主要内容,如果未能解决你的问题,请参考以下文章

在水平和垂直Recyclerview中滚动问题

ContentPane 中的 dgrid - 滚动错误

带垂直和水平滚动条的系统度量展示程序

将水平 RecyclerView 作为项目放置在垂直 RecyclerView 中时的自动滚动问题

水平和垂直回收器视图中的滚动问题

dojo dgrid 或 slick Grid 中的批量更新支持不可用