2016-08-15 7 views
4

바아 진 그리드 구성 요소를 기반으로 테이블을 구현하려고합니다. 일부 필드는 많은 텍스트를 포함하고 있으며, 그리드는이 경우 여러 줄 대신 항상 한 줄을 표시합니다.바딤 격자에서 단어 랩 (복수 행) 사용

vaadin forum에서 몇 가지 아이디어에 따라 CSS를 수정하려고했지만 동일한 결과가 나타납니다. 또한 같은 경우 그리드 헤더에서 줄임표가있는 단일 행을 표시합니다.

수정 방법을 알려주십시오.

답변

2

Grid는 클라이언트 측에서이 스타일을 관리하므로 직접 제어 할 수 없으며 제어해서도 안됩니다.

그러나 Grid 구성 요소는 숨겨진 데이터 또는 세부 정보를 표시하는 방법을 제공합니다.DetailsGenerator입니다.

그러나 헤더의 경우 가능한 한 머리말을 작게 유지하는 것이 유일한 해결책이므로 아무 것도 할 수 없습니다. 하지만 여전히 내 의견으로는 머리글에 단어 줄 바꿈이 잘 보이지 않을 것입니다.

다음 예는 대답을 감사합니다, 항목 선택에 대한 자세한 내용의 가시성을 관리

Grid g = new Grid(); 
g.addColumn("num"); 
g.addColumn("val"); 

g.setWidth(400, Unit.PIXELS); 
g.setHeight(300, Unit.PIXELS); 

g.getColumn("num").setWidth(100); 
g.getColumn("val").setWidth(300); 

g.addRow("1", "This is just a simple test. No need to take it too seriously, please !!!!"); 
g.addRow("2", "This is just a simple test. No need to take it too seriously, please !!!!"); 
g.addRow("3", "This is just a simple test. No need to take it too seriously, please !!!!"); 
g.addRow("4", "This is just a simple test. No need to take it too seriously, please !!!!"); 

g.addItemClickListener(new ItemClickListener() { 

    /** 
    * 
    */ 
    private static final long serialVersionUID = 1L; 

    @Override 
    public void itemClick(ItemClickEvent event) { 
     g.setDetailsVisible(event.getItemId(), !g.isDetailsVisible(event.getItemId())); 
    } 
}); 

g.setDetailsGenerator(new DetailsGenerator() { 

    /** 
    * 
    */ 
    private static final long serialVersionUID = 1L; 

    @Override 
    public com.vaadin.ui.Component getDetails(RowReference rowReference) { 
     String value = (String)rowReference.getItem().getItemProperty("val").getValue(); 
     Label val = new Label(); 
     val.setValue(value); 
     val.addStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING); 
     return val; 
    } 
}); 

enter image description here

+0

! 나는 그런 식으로 구현을 시도했지만, 내 테이블 12 열에, 그들 중 일부는 여러 줄로 있어야하고 세부 정보 생성기로 그것은 이상하게 보입니다. 또한 헤더의 mutline이 멋지게 보이지 않습니다. 여러분의 의견에 동의하지만, 실제 데이터가 아니라 이름/값이있는 예제 나 진열장이 아닙니다. 탈선으로 인해 열 이름이 변경되어 변경할 수 없습니다. 고맙습니다! – aim