2013-04-06 2 views
1

나는 name, type, image 중 하나에 3 열의 셀 테이블을 가지고 있습니다.gwt에서 celltable의 셀에 동적 스타일 이름 추가하기

셀 목록의 유형 열에있는 유형을 지정하는 또 다른 목록 상자가 있습니다.

셀 테이블 유형은 둘 이상의 행에서 동일 할 수 있습니다. 목록 상자에서 유형을 선택하면 동일한 유형이 아닌 셀 테이블의 모든 행에 이미지 셀에 아이콘이 추가되어야합니다.

이제는 셀 자체에 입력 된 값에 따라 동적으로 스타일 이름을 추가 할 수 있습니다. 그러나 이제는 다른 위젯의 가치에 따라 동적 스타일 이름을 사용하려고합니다.

제게 답을주십시오. 아래 코드는 내가 목록 상자에서 선택에 따라 클래스 명을 추가 할 생각 논리입니다 onChange() 방법

public class CellTableExample implements EntryPoint, ChangeHandler { 

    CellTable<NameType> ct = new CellTable<NameType>(); 
    TextColumn<NameType> nameColumn; 
    ListBox typeListBox = new ListBox(); 

    public void onModuleLoad() { 
    typeListBox.addChangeHandler(this); 
    nameColumn = new TextColumn<NameType>() { 
     @Override 
     public String getValue(NameType object) { 
     return object.getName(); 
     } 
    }; 
    ct.addColumn(nameColumn, "Name"); 

    TextColumn<NameType> name1Column = new TextColumn<NameType>() { 
     @Override 
     public String getValue(NameType object) { 
     return object.getType(); 
     } 
    }; 
    ct.addColumn(name1Column, "Name1"); 

    List<NameType> values = new ArrayList<NameType>(); 

    NameType nameType1 = new NameType("name1", "type1"); 

    NameType nameType2 = new NameType("name2", "type2"); 

    values.add(nameType1); 
    values.add(nameType2); 
    ct.setRowData(values); 

    ct.setLoadingIndicator(null); 
    typeListBox.addItem("type1"); 
    typeListBox.addItem("type2"); 
    HorizontalPanel hp = new HorizontalPanel(); 
    hp.add(typeListBox); 
    hp .add(ct); 


    RootPanel.get().add(hp); 
    } 

    @Override 
    public void onChange(ChangeEvent event) { 
    String type = typeListBox.getValue(typeListBox.getSelectedIndex()); 
    int rowCount = ct.getRowCount(); 

    for(int i=0;i < rowCount; i++) { 
     String value = ct.getRowElement(i).getCells().getItem(1).getInnerText(); 

     if(type.equals(value)) { 
     Window.alert("came here"); 
     TableCellElement cellElement = ct.getRowElement(i).getCells().getItem(0); 
     cellElement.addClassName("information icon"); 
     } 
    } 
    } 
} 

을 제공한다. 하지만 좀 더 일반적인 솔루션을 찾고 있는데요.

+0

위의 설명에서 정확한 질문을 얻으려면 매우 힘듭니다. 일부 코드는 게시 할 수 있습니까? –

답변

0

셀이 테이블에 의해 렌더링 된 후에는 셀의 내용을 조작 할 방법이 없습니다. 그러나 나는 그 좋은하지만 가능하지 아이디어가 : 나중에 표준 그러나 확실히되지 않은 GWT의 DOM 조작을 통해 액세스 할 수 있도록 HTML이 당신의 세포에 속성을 몇 가지 아이디의 또는 사용자 정의 렌더링 :

<td><img src=".." id="icon-of-entity-123" /></td> 

을 그리고 경우 심지어 당신이 낮은 수준에 그것을 조작 할 수 렌더링 후, 비즈니스 로직 이후에 다음과 같이 뭔가를 달성 :

Element e = DOM.getElementById("icon-of-entity-" + getId()); 
e.setAttribute("class", "someclassname"); 

을 누군가가 당신에게 더 나은 솔루션을 준 기원합니다!

관련 문제