如何解决当 CSS 用于列宽时,Vaadin 8 Grid 滚动条的行为不稳定
我的 Vaadin 8 应用程序中有一个网格,有时网格的滚动条在不需要时出现或在不需要时消失。他们甚至可能陷入循环。我的网格有五列,我只使用 Vaadin 8 自带的内置渲染器。
我使用 CSS 将第一列的列宽设置为 30%。如果我从主题中删除该行,则不会出现问题,但我需要它。我怎样才能让它工作?
解决方法
Vaadin 8 Grid 不支持通过 CSS 配置列宽,您应该以编程方式(通过 myColumn.setWidth(pixelWidth);
)设置任何和所有列宽配置,否则客户端计算会中断。这些计算对于确定任何没有固定宽度的列的预期宽度至关重要,因此与滚动条逻辑紧密相关。
不幸的是,没有内置的解决方案来设置列的百分比宽度,或者从服务器端获取网格的实际大小,或者监听网格的大小变化。但是,您可以使用 SizeReporter add-on 来帮助处理后两者(查看 Code Samples tab 以获取使用说明),并从那里计算所需的像素宽度。 GridScrollerExtension add-on 还提供这两种功能,以及查询当前列宽和其他特定于网格的功能。
对于稍微有点 hackier 的解决方案,您还可以使用 JavaScript 回调来查询宽度:
ui.getPage().getJavaScript().addFunction("gridSizeCallback",new JavaScriptFunction() {
@Override
public void call(JsonArray arguments) {
// set myColumn width as 30%
myColumn.setWidth(arguments.getNumber(0) * 0.30);
}
});
ui.getPage().getJavaScript()
.execute("gridSizeCallback(document.getElementById('"
+ grid.getId() + "').clientWidth);");
请注意,这仅提供初始宽度,对调整大小问题没有帮助。解决方案取决于所有可以触发 Grid 调整大小的因素(例如,在调整浏览器大小时通过 ui.getPage().addBrowserWindowResizeListener
重复第二次 JavaScript 调用)。
我想扩展 Anna Koskinen 的答案 https://stackoverflow.com/a/67474239/1184842,但是评论的代码有点多,所以这里没有真正的单独答案......
SizeReporter 只能用作如何将客户端尺寸发送到服务器的想法,因为人们需要网格自动扶梯中 tableWrapper 的内部宽度。否则垂直滚动条空间可能被用作导致错误结果的列的空间,例如列的包装。
我通过使用扩展连接器更改 Grid 的派生类中的实现来实现此目的。我通过这种方式从 SizeReporterConnector 的扩展方法更改了初始化方法模板:
@Override
protected void init() {
super.init();
this.extendedGridServerRpc = this.getRpcProxy(ExtendedGridServerRpc.class);
final Element widget = getWidget().getEscalator().getTableWrapper();
if (widget.getOffsetWidth() > 0 && widget.getOffsetHeight() > 0) {
extendedGridServerRpc.innerSizeChanged(widget.getOffsetWidth(),widget.getOffsetHeight());
}
LayoutManager.get(this.getConnection()).addElementResizeListener(widget,new ElementResizeListener() {
public void onElementResize(ElementResizeEvent event) {
extendedGridServerRpc.innerSizeChanged(widget.getOffsetWidth(),widget.getOffsetHeight());
}
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。