[英]Vaadin Table: how to set maximum initial column width
I have a Vaadin Table with some columns that can have widely-varying content widths. 我有一个Vaadin表,其中某些列的内容宽度可以变化很大。 Sometimes there might be no rows with more than a few characters in them;
有时,可能没有一行包含几个字符的行。 other times, there might be rows with enough text to fill a screen.
其他时候,可能会有行,其中的文本足以填满整个屏幕。
I want to set an explicit column width to prevent the column from taking up too much space by default. 我想设置一个明确的列宽,以防止该列默认情况下占用过多空间。 This can be done with
Table#setColumnWidth
. 这可以通过
Table#setColumnWidth
。 However, if all values for the column are shorter than that specified width, I would like to revert to auto-sizing, so that the column is only as wide as it needs to be. 但是,如果该列的所有值都小于指定的宽度,那么我想恢复到自动调整大小,以便该列仅根据需要的宽度而定。
In all cases, I still want the column to be manually resizable. 在所有情况下,我仍然希望该列可以手动调整大小。
Essentially, I want to say 'auto-size, up to a maximum width of x
'. 本质上,我想说“自动调整大小,最大为
x
的宽度”。 Is there a way to do this? 有没有办法做到这一点?
It is possible. 有可能的。 You will need to jump into Javascript.
您将需要跳入Javascript。 SSCCE:
SSCCE:
@com.vaadin.annotations.JavaScript("main.js")
public class QwertUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = QwertUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
final Table table = new Table("The Brightest Stars");
table.addContainerProperty("Name", String.class, null);
table.addContainerProperty("Mag", Float.class, null);
Object newItemId = table.addItem();
Item row1 = table.getItem(newItemId);
row1.getItemProperty("Name").setValue("Sirius");
row1.getItemProperty("Mag").setValue(-1.46f);
// Add a few other rows using shorthand addItem()
table.addItem(new Object[]{"Canopus", -0.72f}, 2);
table.addItem(new Object[]{"Arcturus", -0.04f}, 3);
table.addItem(new Object[]{"Alpha Centaurissssssssssssssssssssssssssssssssssssssssssss", -0.01f}, 4);
JavaScript.getCurrent().addFunction("YouAreWelcome", new JavaScriptFunction(){
@Override
public void call(JsonArray arguments)
{
Object o = arguments.get(0).asString();
table.setColumnWidth("Name", new Integer(o.toString()));
}
});
JavaScript.getCurrent().execute("WeChooseToGoToTheMoon()");
table.setPageLength(table.size());
layout.addComponent(table);
}
}
And main.js 和main.js
function WeChooseToGoToTheMoon(){
var myMaxWidth = 200;
var elements = document.getElementsByClassName("v-table-cell-content");
var maxSize = -1;
for(i=0; i<elements.length; i++){
if(elements[i].clientWidth > maxSize){
maxSize = elements[i].clientWidth;
}
}
if(maxSize < myMaxWidth){
YouAreWelcome(maxSize);
}else{
YouAreWelcome(myMaxWidth);
}
}
You may need to adjust the javascript to suit your needs. 您可能需要调整JavaScript以适应您的需求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.