Wicket：使用 RepeatingView 删除 FileUpload

Question

按照Wicket: FileUploadField with ListView，现在我需要允许用户使用 FileUploadField 旁边的按钮逐个删除文件。

当文件已经保存时它可以正常工作，但是当它们没有被重置时 FileUploadField...

所以我试过这个：

AjaxLink<Void> deleteLink = new AjaxLink<Void>("deleteLink") {

            private static final long serialVersionUID = 1L;

            @Override
            public void onClick(AjaxRequestTarget target) {     
                EtdConfigForm parent = (EtdConfigForm)EtdDokumentRowForm.this.getParent().getParent().getParent().getParent().getParent();
                EtdDokumentRowPanel panel = (EtdDokumentRowPanel)EtdDokumentRowForm.this.getParent();
                parent.removeDokument(panel);
                target.prependJavascript("var itemRemove = document.getElementById('"+ panel.getMarkupId() + "');" +
                        "itemRemove.parentNode.removeChild(itemRemove);" + 
                        "Wicket.$('" + panel.getParent().getParent().getMarkupId() + "').children('"+ panel.getMarkupId()+"').remove();");
                target.addComponent(parent);
            }
        };
        add(deleteLink);

但它不起作用...我的意思是 ajax 部分...我做错了什么？

Answer 1

首先，你应该避免这种基于当前组件位置的方法的链式调用，因为它根本不灵活。

要查找类型化的父组件，您可以使用组件的findParent(final Class<Z> c) 方法。

实际上，我无法理解您的AjaxLink 放在哪里，但我认为它应该直接位于EtdDokumentRowPanel，紧邻FileUploadField。

因此，要删除整个EtdDokumentRowPanel，您应该首先将其从RepeatingView 中删除，然后执行带有标记删除的脚本。当然，如果您将此面板存储在其他地方（我想是在EtdConfigForm），那么它也应该从那里删除。

不要在父对象中搜索RepeatingView，最好通过构造函数将其传递给每个EtdDokumentRowPanel。

会是这样的：

public class EtdDokumentRowPanel extends Panel
{
    ...
    public EtdDokumentRowPanel ( String id, EtdDokument doc, final RepeatingView view )
    {
        //your panel should have markup id:
        setOutputMarkupId ( true );
        ...
        AjaxLink<Void> deleteLink = new AjaxLink<Void> ( "deleteLink" )
        {    
            @Override
            public void onClick ( AjaxRequestTarget target )
            {
                EtdDokumentRowPanel thisPanel = EtdDokumentRowPanel.this;

                // removing row panel from RepeatingView:
                view.remove (thisPanel);

                // execute this js to remove child from Wicket parent component:
                target.prependJavascript ( 
                        "Wicket.$('" + view.getParent ().getMarkupId () + "')" +
                        ".removeChild(Wicket.$('" + thisPanel.getMarkupId () +
                        "'));" );    
            }
        };
        add ( deleteLink );
        ...
    }
}