Vaadin Table：如何设置最大初始列宽答案

【问题标题】：Vaadin Table: how to set maximum initial column widthVaadin Table：如何设置最大初始列宽
【发布时间】：2015-09-10 22:59:15
【问题描述】：

我有一个 Vaadin 表，其中一些列的内容宽度可能变化很大。有时可能没有包含多个字符的行；其他时候，可能会有足够的文本填满屏幕。

我想设置一个明确的列宽，以防止该列默认占用太多空间。这可以通过Table#setColumnWidth 完成。但是，如果列的所有值都比指定的宽度短，我想恢复为自动调整大小，以便该列只有它需要的宽度。

在所有情况下，我仍然希望该列可以手动调整大小。

基本上，我想说“自动调整大小，最大宽度为x”。有没有办法做到这一点？

【问题讨论】：

还有 Setcolumnexpandratio() 可以帮助设置一些自动宽度

标签： java vaadin vaadin7

【解决方案1】：

这是可能的。您将需要跳转到 Javascript。 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);
    }

}

还有 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);
    }
}

您可能需要调整 javascript 以满足您的需要。

【讨论】：

感谢您的灵感和好例子！