जीडब्ल्यूटी सेलटेबलबिल्डर

Question

के साथ मांग पर एक कस्टम पंक्ति तैयार करना जीडब्ल्यूटी 2.5 आरसी सेलटेबलबिल्डर एपीआई में पेश किया गया था लेकिन अभी तक कोई व्यापक दस्तावेज उपलब्ध नहीं है। क्या सेलटेबलबिल्डर के साथ ऑन-डिमांड कस्टम पंक्ति निर्माण को लागू करने का कोई ट्यूटोरियल \ उदाहरण है? एकमात्र उदाहरण जो मैंने पाया है वह http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid था लेकिन यह मेरे लिए काफी भ्रमित है।

तो, मेरा लक्ष्य विजेट युक्त अतिरिक्त पंक्ति बनाना है जो तालिका में क्लिक की गई पंक्ति के बारे में विवरण प्रदान करता है।

Answer 1

मुझे इस समस्या के लिए उपयुक्त समाधान मिला है।

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 से जुड़ा हुआ है: यहाँ कोड नमूना है। और इस कॉल से पहले तत्व सेट में लक्ष्य पंक्ति आईडी जोड़ना आवश्यक है।

आशा है कि यह सहायक होगा।

Answer 2

मैंने जीडब्ल्यूटी में पंक्तियों का विस्तार करने के लिए इस कक्षा को बनाया है। यह एक कॉलम लेता है जिसे आप विस्तारित करना चाहते हैं और इसे किसी स्थान धारक के साथ बदल सकते हैं जिसमें 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 कॉन्फ़िगर किया गया था बैठने के लिए

आशा है कि किसी को मदद करता है :)

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