Vaadin表：如何設置最大初始列寬度

Question

我有一個Vaadin表，其中一些列可以具有廣泛變化的內容寬度。有時可能不會有超過幾個字符的行;其他時候，可能會有足夠的文本行填滿屏幕。

我想設置一個明確的列寬以防止列佔用太多空間默認情況下。這可以使用Table#setColumnWidth來完成。但是，如果列的所有值都小於指定的寬度，我想恢復爲自動調整大小，以便列只有它所需的寬度。

在所有情況下，我仍然希望列可以手動調整大小。

本質上，我想說'自動尺寸，最大寬度爲x'。有沒有辦法做到這一點？

Answer 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來滿足您的需求。