如何在DataGrid的底部创建水平滚动条，如GWT CellSampler示例

Question

我喜欢DataGrid，因为它有固定的标题，所以当用户向下滚动时，他们仍然能够看到列标题。

但是，如果有太多的列，那么DataGrid将设法在包含它的小部件的固定宽度内容纳所有列。

例如，如果将30列DataGrid放在DockLayoutPanel的中心(100px)，那么所有30列将在100px内均匀划分，这将使其无法读取，因为每列的宽度太小。

所以，我想使用DataGrid，但DataGrid应该有一个水平滚动条在底部，所以如果有许多列，然后用户可以水平滚动到右边看数据。

如果我们做得正确，那么它应该像GWT CellSampler示例 http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellSampler

显然，CellSampler使用了DataGid，但我没有看到任何水平滚动条代码在那里。

那么如何使DataGrid显示在CellSampler的例子?

Answer 1

你应该为你的DataGrid设置最小宽度:

myDataGrid.setMinimumTableWidth(600, Unit.PX);

Answer 2

我已经为My Table Datagrid做了如下的操作。

     FlowPanel tablePanel = new FlowPanel();
    tablePanel.add( table );
    tablePanel.getElement().setAttribute( "style",
        "overflow-x: auto;width: " + ( Window.getClientWidth() - 37 ) + "px;clear: both" );
    add( tablePanel );