[英]Allow scrolling and sorting to GWT Grid
Good day. 美好的一天。 I'm making a gwt application with tables using
GWT Grid
. 我正在使用
GWT Grid
创建一个包含表格的gwt应用程序。 Now, I want my GWT Grid
to have a scrollbar
when rowCount is greater than 15. The header is not part of the scrollable area. 现在,当rowCount大于15时,我希望我的
GWT Grid
有一个scrollbar
。标题不是可滚动区域的一部分。
My problems are: 我的问题是:
My current code will allow scrolling when rowCount > 15 including the header. 当rowCount> 15(包括标题)时,我的当前代码将允许滚动。 Please help.
请帮忙。 Thanks in advance.
提前致谢。
Maybe it's time to switch to cell widgets, and DataGrid. 也许是时候切换到单元小部件和DataGrid了。
Scrolling 滚动
I won't dig deep into GWT with this post but I'll try to give some hints on how to do the scrolling part. 我不会用这篇文章深入研究GWT,但我会尝试给出一些关于如何进行滚动部分的提示。
If your table's data is wrapped in a separate tag than the table's body, then it shouldn't be a problem. 如果您的表的数据被包装在一个单独的标签而不是表的主体,那么它应该不是问题。 If the table's structure is similar to the following, it shouldn't be a problem:
如果表的结构类似于以下内容,那应该不是问题:
<table>
<thead>
<tr>
<th>ColumnHeader1</th>
<th>ColumnHeader2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</tbody>
</table>
To make the data part vertically scrollable, you should add a CSS style to the <tbody>
element which sets overflow-y: scroll;
要使数据部分可以垂直滚动,你应该为
<tbody>
元素添加一个CSS样式,它设置overflow-y: scroll;
when the rowcount is greater than 15. Also you need to set the height or limit it's height by other means (wrapping container) for the scrollbar to appear. 当rowcount大于15.此外,您需要设置高度或通过其他方式(包装容器)限制它的高度,以显示滚动条。
To set the height, I'd consider to get the <tbody>
's offset height right after the 15th row has been added and force it to stay at that. 要设置高度,我会考虑在添加第15行后立即获取
<tbody>
的偏移高度,并强制它保持在那个位置。 It might go like this: 它可能会像这样:
tbodyElement.setHeight(tbodyElement.getOffsetHeight());
Remember, this has to be done right after adding the 15th row. 请记住,这必须在添加第15行后立即完成。
Sorting 排序
For that you should wrap your column header names in some kind of a Widget
. 为此,您应该将列标题名称包装在某种
Widget
。 It could be a HTML
or a Label
for example. 例如,它可以是
HTML
或Label
。 You just need to add ClickHandler
s to them and some styling to fill the whole cell and the cursor to switch to a hand with CSS cursor: pointer;
你只需要将
ClickHandler
添加到它们和一些样式来填充整个单元格和光标切换到一个带有CSS cursor: pointer;
的手cursor: pointer;
while hovering on it. 徘徊在它上面。
Conclusion 结论
Well, this was my light overview of this. 嗯,这是我对此的简要概述。 Without seeing the code you've done it's hard to go any further.
如果没有看到你已经完成的代码,就很难再进一步了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.