1

我正在创建一个带有多个选项卡的网页。为了实现这一点，我使用了 wicketAjaxTabbedPanel和几个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));
}

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

编辑： 我刚刚发现如果我替换AjaxTabbedPanelbyTabbedPanel我没有这个问题。虽然我仍然不确定为什么会这样。任何人都可以启发我吗？

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

3 回答 3

2

在 Wicket 6.0 中，您可以基于组件运行 JavaScript：只需为您的组件覆盖 renderHead(IHeaderResponse response)：

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);

    response.render(new OnLoadHeaderItem("initalizeMe(\"" + getMarkupId() + "\");"));
}

每次 AjaxTabbedPanel 加载组件时都会执行initializeMe( mycomponentId )。这也适用于标准的 TabbedPanel。

于 2014-10-10T16:09:07.797 回答
2

通过 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 生成的链接。

于 2011-04-01T12:27:53.207 回答
0

没有真正的想法，因为我不确定代码在做什么，但我的Panel Manager有类似的问题。基本上，如果您在内容中使用“innerhtml”脚本将 HTML 动态加载到面板（div 或其他元素）中，则不会执行。

为了解决这个问题，我扫描加载的“脚本”标签内容并使用 DOM 方法附加它们——这确实运行脚本并使其可用。我的“加载”方法是：

    // Load Content
Panel.load = function(Content) {

        // "null" the old (to clear it)
    Panel.innerHTML = null;

        // Load the content
    Panel.innerHTML = Content;

        // Load Scripts
    var AllScripts = Panel.getElementsByTagName("script");
    var AllScriptsCnt = AllScripts.length;
    for (var Cnt = 0; Cnt < AllScriptsCnt; Cnt++){
        var CurScript = document.createElement('script');
        CurScript.type = "text/javascript";
        CurScript.text = AllScripts[Cnt].text;
        Panel.appendChild(CurScript);
    };

};

同样，不确定这是否是问题所在，但根据我的经验，这听起来很符合目标。

于 2011-04-01T13:06:45.830 回答