如何将flextable cell转换为GWT中的可编辑文本单元格

Question

这是我试图使flextable的单元格可编辑的代码

flex表加载了db值，当用户点击flextable的单元格时，它必须变得可编辑，用户输入的值必须存储在db中，用户单击每行出现的提交按钮。

我正在使用EditTextCell（）来使单元格可编辑但在测试时它不会变得可编辑。我在下面列出了所有代码。如果我遗漏任何东西，请告诉我。

 private List<PendingChange<?>> pendingChanges = new ArrayList<PendingChange<?>>();   
private List<AbstractEditableCell<?, ?>> editableCells = new   ArrayList<AbstractEditableCell<?, ?>>();   
CellTable cellTable= new CellTable<MessageEvent>();   
EditTextCell editCell = new EditTextCell();    
protected FlexTable flextable;
//flextable creation   
private final void createWorkflows(List<MessageEvent> theWorkflowMessageEvents, boolean isSelectAll) {   
    int row = 1;      
    if (theWorkflowMessageEvents != null) {   
        for (final MessageEvent workflowMessageEvent : theWorkflowMessageEvents) {     
             flextable.getRowFormatter().setStyleName(row,ACTIVE_COLLECTION);   
                flextable.getCellFormatter().setHorizontalAlignment(row, 0, HasHorizontalAlignment.ALIGN_LEFT);   
                flextable.getCellFormatter().setWordWrap(row, 0, false);   
                flextable.setText(row, 0, workflowMessageEvent.getTransferReceived()); 
                flextable.getCellFormatter().setHorizontalAlignment(row, 1, HasHorizontalAlignment.ALIGN_LEFT);   
                flextable.getCellFormatter().setWordWrap(row, 1, false);   
                flextable.setText(row, 1, workflowMessageEvent.getLoadReceived());   
                makeFlexTableEditable() ;
Button submitButton= new Button("Submit");   
                flextable.getCellFormatter().setHorizontalAlignment(row, 3, HasHorizontalAlignment.ALIGN_LEFT);   
                flextable.getCellFormatter().setWordWrap(row, 3, false);   
                flextable.setWidget(row, 3,submitButton );   
                submitWorklow(submitButton,row, workflowMessageEvent);   
                flextable.getRowFormatter().setVisible(row, true);   
                row++;         
              }
}
 }
     //adding flextable to main panel   
protected void displayPendingWorkflows(final List<MessageEvent> theWorkflowMessageEvents) {
this.createPendingWorkflows(theWorkflowMessageEvents, false);   
//some code   
mainPanel.add(flextable);   
mainPanel.add(cellTable);   
}
//code for making flex table editable for TransferReceived column   
 private void makeFlexTableEditable() {   
         addColumn(new EditTextCell(), new GetValue() {   
                @Override  
                public String getValue(MessageEvent workflowMessageEvent) {   
                    return workflowMessageEvent.getTransferReceived();   
                }   
            }, new FieldUpdater<MessageEvent, String>() {   
                  public void update(int index, MessageEvent workflowMessageEvent, String value) {
 try { pendingChanges.add(new TransferReceived(workflowMessageEvent, value));
  }catch (Exception e) {
}
}
 });
   }  


     private <C> Column<MessageEvent, String> addColumn(EditTextCell cell,     
         final GetValue<String> getter,FieldUpdater<MessageEvent, String> fieldUpdater) {   
        Column<MessageEvent, String> transColumn = new Column<MessageEvent, String>(cell){    
            @Override     
            public String getValue(MessageEvent object) {   
                return getter.getValue(object);    
                }    
            };   
            transColumn.setFieldUpdater(fieldUpdater);    

                if (cell instanceof AbstractEditableCell<?, ?>) {   
                  editableCells.add((AbstractEditableCell<?, ?>) cell);   
            }   
            cellTable.addColumn(transColumn);   
            return transColumn;   
    }

  /**  
   * A pending change to a {@link MessageEvent}. Changes aren't committed  
   * immediately to illustrate that cells can remember their pending changes.  
   *  
   * @param <T> the data type being changed  
   */  
  private abstract static class PendingChange<T> {   
    private final MessageEvent message;   
    private final T value;   

    public PendingChange(MessageEvent message, T value) {   
      this.message = message;   
      this.value = value;   
    }   

    /**  
     * Commit the change to the contact.  
     */  
    public void commit() {   
      doCommit(message, value);   
    }   

    /**  
     * Update the appropriate field in the .  
     *  
     * @param message to update  
     * @param value the new value  
     */  
    protected abstract void doCommit(MessageEvent message, T value);   
  }   
  /**  
   * Updates the Transfered Received.  
   */  
  private static class TransferReceived extends PendingChange<String> {   

    public TransferReceived(MessageEvent message, String value) {   
      super(message, value);   
    }   

    @Override  
    protected void doCommit(MessageEvent message, String value) {   
        message.setTransferReceived(value);   
    }   
  }   

/**  
   * Get a cell value from a record.  
   *  
   * @param <C> the cell type  
   */  
  private static interface GetValue<C> {   
    C getValue(MessageEvent message);   
  } 

Answer 1

我在我的应用中做了类似的事情。很抱歉，如果语法有点偏，但主要的想法是使用clickevent然后获取此事件位置并在该位置交换小部件。

final FlexTable flexTable = new FlexTable();
flexTable.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        Cell cell = flexTable.getCellForClickEvent(event);
        final int row = cell.getRow();
        final int column = cell.getIndex();
        final TextBox textBox = new TextBox();
        // Get the text from the cell in some way. Maybe use flextTable.getHTML(row, column) or what ever you prefer
        // textBox.setText("Something other than this");
        textBox.addKeyDownHandler(new KeyDownHandler() {
           public void onKeyDownEvent(KeyDownEvent event) {
                int code = event.getNativeKeyCode();
                if (KeyCodes.KEY_ENTER == code) {
                   flexTable.setWidget(row, column, new Label(textBox.getText()));
                }
           }
        });
        flexTable.setWidget(row, column, textBox);
        // You may also need something like this
        textBox.setFocus(true);
    }
});