2012-07-03 1 views
8

GWT 2.5 RC CellTableBuilder API에서 소개되었지만 아직 사용할 수있는 포괄적 인 설명서가 없습니다. CellTableBuilder를 사용하여 주문형 사용자 정의 행을 구현하는 자습서 \ 예제가 있습니까? 지금까지 발견 한 유일한 예는이 하나였습니다 http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid하지만 꽤 혼란 스럽습니다.GWT CellTableBuilder를 사용하여 필요에 따라 맞춤 행 만들기

내 목표는 테이블의 클릭 된 행에 대한 세부 정보를 제공하는 위젯이 포함 된 추가 행을 만드는 것입니다.

+1

:). 답으로 입력하고 다른 사람들도 이익을 얻을 수 있도록 체크하십시오 –

답변

6

이 문제에 대한 적절한 해결책을 찾았습니다.

그것은 언급해야
public class CustomCellTableBuilder extends AbstractCellTableBuilder<Object>{ 
//here go fields, ctor etc. 

//ids of elements which details we are going to show 
private Set elements; 

@Override 
protected void buildRowImpl(Object rowValue, int absRowIndex){ 
    //building main rows logic 

    if(elements.contains(absRowIndex)){ 
     buildExtraRow(absRowIndex, rowValue); 
     elements.add(absRowIndex); 
    } 
} 

private void buildExtraRow(int index, Object rowValue){ 
    TableRowBuilder row = startRow(); 
    TableCellBuilder td = row.startTD().colSpan(getColumns().size()); 
    DivBuilder div = td.startDiv(); 

    Widget widget = new Widget(); 

    //update widget state and appearance here depending on rowValue 

    div.html(SafeHtmlUtils.fromTrustedString(widget.getElement().getInnerHTML())); 

    div.end(); 
    td.endTD(); 
    row.endTR(); 
}} 

, 당신은 여분의 행의 모습에 이르게 몇 가지 이벤트를 처리 할 때, 당신은 CellTable에 redrawRaw (rowIndex에)를 호출해야 TableBuilder에 부착 다음은 코드 샘플입니다. 그리고이 호출 전에 Set 요소에 목표 행 ID를 추가해야합니다.

희망이있었습니다.

+1

"rowValue에 따라 여기에서 위젯 상태 및 모양 업데이트"라는 코멘트에 어떤 종류의 코드를 표시 할 수 있습니까? 행에 셀을 만들어야합니까? 라벨로 위젯을 설정하는 것과 같은 간단한 테스트를 시도했지만 아무 일도 일어나지 않습니다. –

+1

@ NunoGonçalves, 라벨을'widget'의 자식으로 추가 했습니까? 디버거가'buildExtraRow (int index, Object rowValue)'메소드에 들어 갔습니까? –

+1

@ NunoGonçalves,이 구현에서 내 필요에 더 적합한 자체 작성 테이블 구성 요소로 전환해야한다고 언급해야합니다. 하위 위젯으로 다른 'CellTable'이 필요하며 이벤트 전파에 많은 문제가 있습니다. –

0

GWT에서 행을 확장하기 위해이 클래스를 만들었습니다. 펼치려는 열을 가져 와서 2 개의 상태를 가질 수있는 자리 표시 자로 바꿉니다.

나는 이런 식으로 그것을 사용 :

PlaceHolderColumn<Notification, SafeHtml> placeholder = new PlaceHolderColumn<Notification, SafeHtml>(new SafeHtmlCell()) { 
     @Override 
     public SafeHtml getValue(Notification object) { 
      return SafeHtmlUtils.fromSafeConstant(getSelected() ? "<i class=\"glyphicon glyphicon-chevron-down\"></i>" 
        : "<i class=\"glyphicon glyphicon-chevron-right\"></i>"); 
     } 
    }; 

    notificationsTable.setTableBuilder(new ExpandableCellTableBuilder<Notification, SafeHtml>(notificationsTable, columnBody, placeholder)); 

은 내가 대신 여기 +/-

< 이미지입니다 기본 틀 컬럼의 사람들을 사용하므로 glyphicon에 액세스 할 수 있습니다 ...하지만 부족 평판의 :>

columnBody 위의 코드 샘플은 표의 너비에 해당하는 표준 열입니다. 자리 표시 자 위치는 어느 위치 에나 표시됩니다 (columnBody). 앉아있는 것. 당신이 대답을 발견하는 경우 사람을 도움이

희망은 EDIT로 게시하지 않습니다

public class ExpandableCellTableBuilder<T, U> extends AbstractCellTableBuilder<T> { 

private Column<T, U> expandColumn = null; 
private PlaceHolderColumn<T, ?> placeholderColumn = null; 

private final String evenRowStyle; 
private final String oddRowStyle; 
private final String selectedRowStyle; 
private final String cellStyle; 
private final String evenCellStyle; 
private final String oddCellStyle; 
private final String firstColumnStyle; 
private final String lastColumnStyle; 
private final String selectedCellStyle; 

public static class ExpandMultiSelectionModel<T> extends AbstractSelectionModel<T> { 

    Map<Object, T> selected = new HashMap<Object, T>(); 

    /** 
    * @param keyProvider 
    */ 
    public ExpandMultiSelectionModel(ProvidesKey<T> keyProvider) { 
     super(keyProvider); 
    } 

    /* 
    * (non-Javadoc) 
    * 
    * @see com.google.gwt.view.client.SelectionModel#isSelected(java.lang.Object) 
    */ 
    @Override 
    public boolean isSelected(T object) { 
     return isKeySelected(getKey(object)); 
    } 

    protected boolean isKeySelected(Object key) { 
     return selected.get(key) != null; 
    } 

    /* 
    * (non-Javadoc) 
    * 
    * @see com.google.gwt.view.client.SelectionModel#setSelected(java.lang.Object, boolean) 
    */ 
    @Override 
    public void setSelected(T object, boolean selected) { 
     Object key = getKey(object); 
     if (isKeySelected(key)) { 
      this.selected.remove(key); 
     } else { 
      this.selected.put(key, object); 
     } 
     scheduleSelectionChangeEvent(); 
    } 
} 

public static abstract class PlaceHolderColumn<T, C> extends Column<T, C> { 

    private boolean isSelected; 

    /** 
    * @param cell 
    */ 
    public PlaceHolderColumn(Cell<C> cell) { 
     super(cell); 
    } 

    protected boolean getSelected() { 
     return isSelected; 
    } 

} 

private int expandColumnIndex; 

public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> expandColumn) { 
    this(cellTable, expandColumn, new ExpandMultiSelectionModel<T>(cellTable.getKeyProvider()), null); 
} 

public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> exandColumn, SelectionModel<T> selectionModel) { 
    this(cellTable, exandColumn, selectionModel, null); 
} 

public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> exandColumn, PlaceHolderColumn<T, ?> placeHolder) { 
    this(cellTable, exandColumn, new ExpandMultiSelectionModel<T>(cellTable.getKeyProvider()), placeHolder); 
} 

/** 
* @param cellTable 
* @param columnBody 
*/ 
public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> expandColumn, SelectionModel<T> selectionModel, 
     PlaceHolderColumn<T, ?> placeHolder) { 
    super(cellTable); 

    this.expandColumn = expandColumn; 

    this.cellTable.setSelectionModel(selectionModel); 

    if (placeHolder == null) { 
     this.placeholderColumn = new PlaceHolderColumn<T, String>(new TextCell()) { 
      @Override 
      public String getValue(T object) { 
       return getSelected() ? "-" : "+"; 
      } 
     }; 
    } else { 
     this.placeholderColumn = placeHolder; 
    } 

    // Cache styles for faster access. 
    Style style = cellTable.getResources().style(); 
    evenRowStyle = style.evenRow(); 
    oddRowStyle = style.oddRow(); 
    selectedRowStyle = " " + style.selectedRow(); 
    cellStyle = style.cell(); 
    evenCellStyle = " " + style.evenRowCell(); 
    oddCellStyle = " " + style.oddRowCell(); 
    firstColumnStyle = " " + style.firstColumn(); 
    lastColumnStyle = " " + style.lastColumn(); 
    selectedCellStyle = " " + style.selectedRowCell(); 
} 

/* 
* (non-Javadoc) 
* 
* @see com.google.gwt.user.cellview.client.AbstractCellTableBuilder#buildRowImpl(java.lang.Object, int) 
*/ 
@Override 
protected void buildRowImpl(T rowValue, int absRowIndex) { 
    // Calculate the row styles. 
    SelectionModel<? super T> selectionModel = cellTable.getSelectionModel(); 
    final boolean isSelected = (selectionModel == null || rowValue == null) ? false : selectionModel.isSelected(rowValue); 
    boolean isEven = absRowIndex % 2 == 0; 
    StringBuilder trClasses = new StringBuilder(isEven ? evenRowStyle : oddRowStyle); 
    if (isSelected) { 
     trClasses.append(selectedRowStyle); 
    } 

    // Add custom row styles. 
    RowStyles<T> rowStyles = cellTable.getRowStyles(); 
    if (rowStyles != null) { 
     String extraRowStyles = rowStyles.getStyleNames(rowValue, absRowIndex); 
     if (extraRowStyles != null) { 
      trClasses.append(" ").append(extraRowStyles); 
     } 
    } 

    // Build the row. 
    TableRowBuilder tr = startRow(); 
    tr.className(trClasses.toString()); 

    // Build the columns. 
    int columnCount = cellTable.getColumnCount(); 
    for (int curColumn = 0; curColumn < columnCount; curColumn++) { 
     Column<T, ?> column = cellTable.getColumn(curColumn); 

     if (column == expandColumn) { 
      expandColumnIndex = curColumn; 
      column = placeholderColumn; 
      placeholderColumn.isSelected = isSelected; 
     } 

     // Create the cell styles. 
     StringBuilder tdClasses = new StringBuilder(cellStyle); 
     tdClasses.append(isEven ? evenCellStyle : oddCellStyle); 
     if (curColumn == 0) { 
      tdClasses.append(firstColumnStyle); 
     } 
     if (isSelected) { 
      tdClasses.append(selectedCellStyle); 
     } 
     // The first and last column could be the same column. 
     if (curColumn == columnCount - 1) { 
      tdClasses.append(lastColumnStyle); 
     } 

     // Add class names specific to the cell. 
     Context context = new Context(absRowIndex, curColumn, cellTable.getValueKey(rowValue)); 
     String cellStyles = column.getCellStyleNames(context, rowValue); 
     if (cellStyles != null) { 
      tdClasses.append(" " + cellStyles); 
     } 

     // Build the cell. 
     HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment(); 
     VerticalAlignmentConstant vAlign = column.getVerticalAlignment(); 
     TableCellBuilder td = tr.startTD(); 
     td.className(tdClasses.toString()); 
     if (hAlign != null) { 
      td.align(hAlign.getTextAlignString()); 
     } 
     if (vAlign != null) { 
      td.vAlign(vAlign.getVerticalAlignString()); 
     } 

     // Add the inner div. 
     DivBuilder div = td.startDiv(); 
     div.style().outlineStyle(OutlineStyle.NONE).endStyle(); 

     // Render the cell into the div. 
     renderCell(div, context, column, rowValue); 

     // End the cell. 
     div.endDiv(); 
     td.endTD(); 
    } 

    // End the row. 
    tr.endTR(); 

    if (isSelected) { 
     buildExpandedRow(rowValue, absRowIndex, columnCount, trClasses, isEven, isSelected); 
    } 
} 

/** 
* @param trClasses 
* 
*/ 
private void buildExpandedRow(T rowValue, int absRowIndex, int columnCount, StringBuilder trClasses, boolean isEven, boolean isSelected) { 
    TableRowBuilder tr = startRow(); 
    tr.className(trClasses.toString()); 

    Column<T, ?> column = expandColumn; 
    // Create the cell styles. 
    StringBuilder tdClasses = new StringBuilder(cellStyle); 
    tdClasses.append(isEven ? evenCellStyle : oddCellStyle); 
    tdClasses.append(firstColumnStyle); 
    if (isSelected) { 
     tdClasses.append(selectedCellStyle); 
    } 
    tdClasses.append(lastColumnStyle); 

    // Add class names specific to the cell. 
    Context context = new Context(absRowIndex, expandColumnIndex, cellTable.getValueKey(rowValue)); 
    String cellStyles = column.getCellStyleNames(context, rowValue); 
    if (cellStyles != null) { 
     tdClasses.append(" " + cellStyles); 
    } 

    // Build the cell. 
    HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment(); 
    VerticalAlignmentConstant vAlign = column.getVerticalAlignment(); 
    TableCellBuilder td = tr.startTD(); 
    td.colSpan(columnCount); 
    td.className(tdClasses.toString()); 
    if (hAlign != null) { 
     td.align(hAlign.getTextAlignString()); 
    } 
    if (vAlign != null) { 
     td.vAlign(vAlign.getVerticalAlignString()); 
    } 

    // Add the inner div. 
    DivBuilder div = td.startDiv(); 
    div.style().outlineStyle(OutlineStyle.NONE).endStyle(); 

    // Render the cell into the div. 
    renderCell(div, context, column, rowValue); 

    // End the cell. 
    div.endDiv(); 
    td.endTD(); 

    // End the row. 
    tr.endTR(); 
} 
관련 문제