Budowanie niestandardowego wiersza na żądanie za pomocą GWT CellTableBuilder

Question

W GWT 2.5 RC Wprowadzono interfejs API CellTableBuilder, ale nie ma jeszcze obszernej dokumentacji. Czy jest jakiś tutorial \ przykład implementacji niestandardowego budowania wierszy na żądanie za pomocą CellTableBuilder? Jedynym przykładem, jaki do tej pory znalazłem, był ten jeden http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid, ale jest to dla mnie dość mylące.

Moim celem jest utworzenie dodatkowego widgetu zawierającego wiersz, który zawiera szczegółowe informacje o klikniętym wierszu w tabeli.

Answer 1

Znalazłem odpowiednie rozwiązanie dla tego problemu. Oto przykładowy kod:

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(); 
}} 

Należy wspomnieć, że kiedy jakiś uchwyt zdarzenia, co prowadzi do pojawienia się dodatkowego rzędu, należy powołać redrawRaw (rowIndex) na CellTable który jest dołączony do TableBuilder. Przed tym połączeniem należy dodać identyfikator wiersza docelowego do elementów Ustaw.

Mam nadzieję, że było to pomocne.

Answer 2

Utworzyłem tę klasę dla rozwijania wierszy w GWT. Zajmuje kolumnę, którą chcesz rozwinąć i zastępuje ją ramką, która może mieć 2 stany.

używam go tak:

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)); 

Mam dostęp do glyphicon więc korzystać z tych zamiast domyślnej kolumny zastępczego, która jest +/-

< Obraz tutaj ... ale z powodu braku reputacji :(>

columnBody w powyższym przykładzie kodu jest to tylko standardowa kolumna, która będzie obejmowała szerokość tabeli. Uchwyt miejsca zostanie wyświetlony w miejscu, w którym skonfigurowano columnBody siedzieć.

nadzieja, że ​​ktoś pomoże :)

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(); 
}