ajax - 用 textField wicket 动态替换 ListView 表格单元格

Question

我有一个 listView，它有一个列，仅在某些情况下才需要可编辑。如果用户需要更改列，我希望他们单击​​该行的编辑按钮，然后用文本字段替换单元格中的标签。当我调用替换时，我可以看到 TextField 现在位于标签的位置，尽管它从未呈现。我有一个 AjaxLink 来处理该事件。我正在使用容器来重新绘制 listView。这是我的 ListView :

    parent = new WebMarkupContainer("emp-table-parent");

    parent.add(new AjaxLink<Object>(FIRST_NAME_HEADER_LINK) {

        /**
         * 
         */
        private static final long serialVersionUID = -1937727929649333407L;

        @Override
        public void onClick(AjaxRequestTarget target) {

            changeGlyphUpdateList(target, parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON), 
                    parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
                    parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON), parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
                    parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));

        }

    }.add(new Label("first-name-header-label", Model.of("First Name")), new WebComponent(FIRST_NAME_HEADER_ICON)),
            new AjaxLink<Object>(LAST_NAME_HEADER_LINK) {

                /**
                 * 
                 */
                private static final long serialVersionUID = -3438649095509412910L;

                @Override
                public void onClick(AjaxRequestTarget target) {

                    changeGlyphUpdateList(target, parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON), 
                            parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON), 
                            parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON), 
                            parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
                            parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));

                }
    }.add(new Label("last-name-header-label", Model.of("Last Name")), new WebComponent(LAST_NAME_HEADER_ICON)),
            new AjaxLink<Object>(EMAIL_HEADER_LINK) {

                /**
                 * 
                 */
                private static final long serialVersionUID = 2890934302751793454L;

                @Override
                public void onClick(AjaxRequestTarget target) {

                    changeGlyphUpdateList(target, parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON), 
                            parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
                            parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON), 
                            parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
                            parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));

                }

    }.add(new Label("email-header-label", Model.of("Email")), new WebComponent(EMAIL_HEADER_ICON)),
            new AjaxLink<Object>(ELIGIBILITY_CLASS_HEADER_LINK) {

                /**
                 * 
                 */
                private static final long serialVersionUID = -4022209586109961448L;

                @Override
                public void onClick(AjaxRequestTarget target) {

                    changeGlyphUpdateList(target, parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON), 
                            parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON), 
                            parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
                            parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON), 
                            parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));

                }

    }.add(new Label("eligibility-class-header-label", Model.of("Elig. Class")), new WebComponent(ELIGIBILITY_CLASS_HEADER_ICON)),
            new AjaxLink<Object>(EMPLOYER_HEADER_LINK) {

                /**
                 * 
                 */
                private static final long serialVersionUID = -738777257301408437L;

                @Override
                public void onClick(AjaxRequestTarget target) {

                    changeGlyphUpdateList(target, parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON), 
                            parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON), 
                            parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON), 
                            parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
                            parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON));

                }

    }.add(new Label("employer-header-label", Model.of("Employer")), new WebComponent(EMPLOYER_HEADER_ICON)),
    new PageableListView<EmployeeSummaryPkt>("data", employeeSummaryModel.getObject(), 25) {

                /**
                 * 
                 */
                private static final long serialVersionUID = -1697070076764699904L;

                @Override
                protected void populateItem(final ListItem<EmployeeSummaryPkt> item) {

                    item.setDefaultModel(new CompoundPropertyModel<EmployeeSummaryPkt>(item.getModelObject()));

                    item.add(new Label("firstName"),
                             new Label("lastName"),
                             new Label("employeeEmail"),
                             new Link<Object>("eligibility-class-data-link") {

                                /**
                                 * 
                                 */
                                private static final long serialVersionUID = -3842291392813313171L;

                                @Override
                                public void onClick() {

                                    //LINK TO ELIGIBILITY CLASS OR MAYBE THE SECTION WITHIN THE EMP?

                                }
                    }.add(new Label("employeeEligibilityClassSummaryPkt.name")),
                             new Link<Object>("employer-data-link") {

                                /**
                                 * 
                                 */
                                private static final long serialVersionUID = 6809571267919974106L;

                                @Override
                                public void onClick() {

                                    getIndex().getHomePanel().setNewContent(new EmployerDetailPanel("panel-content", item.getModelObject().getEmployerSummaryPkt().getId()));

                                }

                    }.add(new Label("employerSummaryPkt.name")),
                             new Label("employeeDateOfBirth"),
                             new Label("employee-code", Model.of(item.getModelObject().getEmployeeName())).setOutputMarkupId(true),
                             new AjaxLink<Object>("edit-employee-link") {

                                /**
                                 * 
                                 */
                                private static final long serialVersionUID = 6061544430700059358L;

                                @Override
                                public void onClick(AjaxRequestTarget target) {

                                    logr.log(Level.FINER, "onClick for edit employee");

                                    logr.log(Level.FINER, "employee code pre: " + item.get("employee-code").getClass().getSimpleName());
                                    item.get("employee-code").replaceWith(new TextField<String>("employee-code", new Model<String>(item.getModelObject().getEmployeeName())).setOutputMarkupId(true));
                                    logr.log(Level.FINER, "employee code post: " + item.get("employee-code").getClass().getSimpleName());
                                    target.addChildren(parent, TextField.class);
                                    target.add(parent);
                                }
                    });
                }

如您所见，ID为“employee-code”的标签是我想要替换的标签。在 AjaxLink onClick 中，您可以看到我在哪里获取标签并替换它。一切都没有改变。非常感谢任何指导或帮助。

Answer 1

ListView 会在每次渲染时重新创建其项目，因此更改后的 listItem 会立即被丢弃。

ListView#setReuseItems(true) 应该有帮助。