Wicket ajax調用不會渲染我的新組件

希望你能幫助我，因爲它已經困擾我幾天了。Wicket ajax調用不會渲染我的新組件

我有一個Wicket數據表填充16列。每行可以有一些孩子的信息（如果它有一個'+'按鈕顯示在第一個單元格中）。由於孩子的信息只是一些常規的文本，它的輸入日期和時間，我不想使用真正的TreeData對象。我一直在試圖將'+'按鈕變成一個AjaxFallbackButton，它可以工作，但是我的子數據被渲染到行的第一個單元格內，這是非常不切實際的。

我現在試圖通過對目標前面加上一些JS動態創建一個新的行： target.prependJavaScript(String.format("var item=document.createElement(\"tr\"); item.id=\"%s\"; $(\"#%s\").after(item);", newChild.getId(), rowId));

這是偉大的，因爲它實際上創建了我的頁面內新標籤。但是，如何在新呈現的HTML中獲取新數據？我想我的問題是，Wicket不'知道'新行，如果我將新的Wicket Item（Wicket中的容器和新行）添加到Wicket DataTable並將DataTable的主體添加到目標，則現在呈現我的新行已完成。

我的頁面標記： [表]

我的自定義數據表擴展的Java代碼（擴展，以確保添加所有outputMarkUp）： @Override 保護無效onInitialize（）{ super.onInitialize（）; this.addTopToolbar（new NavigationToolbar（this））; this.addTopToolbar（new HeadersToolbar <>（this，（ISortableDataProvider）this.getDataProvider（）））; this.addBottomToolbar（new NoRecordsToolbar（this））; this.setOutputMarkupId（true）; }

@Override 
public void renderHead(IHeaderResponse response) { 
    super.renderHead(response); 
    response.render(CssReferenceHeaderItem.forReference(WarehouseToolbarCssReference.get())); 
} 

@Override 
protected Item<T> newRowItem(String id, int index, IModel<T> model) { 
    Item<T> item = super.newRowItem(id, index, model); 
    this.lastId = Integer.valueOf(id); 
    item.setMarkupId(this.getId() + item.getId()); 
    return item; 
}

第一列使用自定義面板，填補了細胞在列，但很多的嘗試和測試之後，我實際上從檢票本身的正常節點結束了：

<wicket:panel xmlns:wicket="http://wicket.apache.org"> 
    <a wicket:id="junction"></a> 
    <span wicket:id="content" class="tree-content">[content]</span> 
cellspacing="0" wicket:id="reasonData">[Reason data]</table>--> 
</wicket:panel>

最後，創造新行，填補了必要的數據（這本身就是一個新的DataTable）以及代碼填充Ajax的目標：

public void onClick(AjaxRequestTarget target) { 
     Integer currentRowIndex = Integer.valueOf(this.findParent(Item.class).findParent(Item.class).getId()); 
     String rowId = this.findParent(Item.class).findParent(Item.class).getMarkupId(); 
     Item<IColumn<OldOrder, String>> newChild = null; 

     this.dataTable.setVisible(true); 

     newChild = new Item<>(String.valueOf(this.findParent(DataTable.class).getLastId() + 1), currentRowIndex * -1, null); 
     newChild.setOutputMarkupId(true); 

     target.prependJavaScript(String.format("var item=document.createElement(\"tr\"); item.id=\"%s\"; $(\"#%s\").after(item);", newChild.getId(), rowId)); 

     this.populateChildRow(newChild); // This is where the new row gets filled with the new data 

     Component rows = this.findParent(DataTable.class).getBody().get("rows"); 
     if (rows instanceof WebMarkupContainer) { 
     ((WebMarkupContainer)rows).add(newChild); 
     } 
     target.add(this.findParent(DataTable.class).getBody()); 
    } 
// This is where the new row gets filled with the new data 
    private void populateChildRow(Item<IColumn<ParentClass>, String>> item) { 
     RepeatingView cells = new RepeatingView("cells"){ 
     @Override // Overridden to check if this gets executed... it doesn't 
     protected void onAfterRender() { 
      super.onAfterRender(); 
      String stop = "STOP"; 
     } 
     }; 

     item.add(cells); 

     Item<?> cellItem = new Item<>("arbitrary", 1, null); 
     cells.add(cellItem); 

     cells.setVisible(false); 
     cells.setOutputMarkupId(true); 
     cells.add(AttributeAppender.append("colspan", this.findParent(DataTable.class).getColumns().size())); 

     this.dataTable.setOutputMarkupId(true); 
     cellItem.add(this.dataTable); // The DataTable with the child data 
    }

除了事實我應該清理一些代碼，孩子的數據永遠不會呈現。有人可以澄清這一點嗎？

來源

2016-05-23 Arduin Cielen

我建議一路去用JavaScript，即創建一個新的<tr>，然後用JS填充它。根本不要使用Wicket的Item。

當點擊展開鏈接時，請執行諸如target.appendJavaScript("yourOwnFunction('"+link.getMarkupId()+"', "+someDataAsJson+")");之類的操作。因此，yourOwnFunction()將使用鏈接ID找到其最接近的父<tr>，然後與JS，你可以追加它後面的新行。一旦創建了行，您就可以根據需要使用JSON和數據來填充它。

來源

2016-05-23 17:00:18

謝謝，這工作完美。 –

Wicket ajax調用不會渲染我的新組件

回答

相關問題