java - Wicket 面板需要刷新页面才能使 javascript 脚本正常工作

Question

我正在创建一个包含多个选项卡的网页。为了实现这一点，我使用了 wicket AjaxTabbedPanel 和几个 AbstractTab。在每个选项卡中，我都有包含数据的表格，我正在使用 javascript 脚本使表格可排序。

public TabbedPage() {
    List<ITab> tabs = new ArrayList<ITab>();
    tabs.add(new AbstractTab(new Model<String>("first tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    tabs.add(new AbstractTab(new Model<String>("second tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    add(new AjaxTabbedPanel("tabs", tabs));
}

当我加载页面时，默认选择的选项卡中的表格是可排序的。但是，一旦我单击任何链接跳转到其他选项卡(包括已选择的选项卡之一)，任何选项卡中的表格都不允许我对它们进行排序(包括之前工作的表格 -默认选项卡中的表格)。如果我刷新页面，我可以对表格(在刷新时选择的选项卡)进行排序，但是只要我单击任何链接以切换选项卡，表格就会再次停止具有可排序功能。为什么会发生这种情况的任何想法？

编辑: 我刚刚发现，如果我将 AjaxTabbedPanel 替换为 TabbedPanel，我就不会遇到这个问题。虽然我仍然不确定为什么会这样。谁能赐教一下？

    add(new TabbedPanel("tabs", tabs));

Answer 1

通过 JavaScript 对表格进行排序很可能是一个使用特定 DOM-Id 调用的函数，并且似乎是在“onLoad”时执行的。然后它访问当前显示的表并正常工作。 通过 Ajax 更改面板的内容不会触发“onLoad”，因此不会再次执行该功能。 TabbedPanel 重新加载页面并因此执行您的脚本。 由于动态生成的 DOM-Id，无法使用 AjaxTabbedPanel 选择先前的可排序表格。

您的解决方案是将 AjaxCallDecorator 添加到来自 AjaxTabbedPanel 的链接，或者包含脚本或至少包含对选项卡式面板的函数调用。

至少这是在没有看到任何来源的情况下想到的...

编辑: 你可能想看看 The Wicket Wiki .单击 AjaxLink 后如何调用 js 的说明。这正是应该解决您的问题的方法。

总结:只需添加

link.add(new AttributeAppender("onclick", new Model("myTableSortingScript();"), ";"));

到 AjaxTabbedPanel 生成的链接。