如何使用 ajax 设置 wicket listview 面板更新的锚点

Question

我在面板中有一个 ListView，它启用了垂直滚动并使用 css 进行绝对定位。当我选择一个添加到 listView 的 IndicatingAjaxFallbackLink 时，它会更新页面上的其他面板，以便为 listItem 提供更多信息/选项。它还刷新 listView 以添加一个 css 类来突出显示选定的 listItem。我正在尝试向 listView 添加一个锚点，以便它呈现滚动以显示选定的 listItem。

问题：当我从列表中选择一个项目时，listView 将重新加载并滚动到面板顶部，而不是选择的项目。如果没有 url 重定向和整页重新加载，这可能吗？

标记：

<div wicket:id="psbContainer" style="position: absolute; top: 325px; height: 300px; overflow-y: auto; left: 4px; right: 305px;">
    <table width="100%">
        <tr wicket:id="psbList" valign="top">
            <td><a wicket:id="viewRelated"><span wicket:id="psbNum"/></a></td>
            <td wicket:id="summary"/>
            <td wicket:id="psbMilestone"/>
            <td wicket:id="dueDate"/>
            <td wicket:id="devCount"/>
            <td wicket:id="activeCount"/>
            <td wicket:id="ccCount"/>
            <td wicket:id="team"/>
        </tr>
    </table>
</div>

java:

    psbListView = new ListView("psbList", psbList) {
        protected void populateItem(ListItem listItem) {
            final Space psb = (Space) listItem.getModelObject();
            if(psb.equals(psbSelected)) {
                listItem.add(selected);
            }
            // viewRelated ========================================================
            IndicatingAjaxFallbackLink viewRelated = new IndicatingAjaxFallbackLink("viewRelated") {
                public void onClick(AjaxRequestTarget target) {
                    psbSelected = psb;
                    target.addComponent(pslpContainer);
                }
            };
            this.setOutputMarkupId(true);
            this.setMarkupId(psb.getPsbNum());
            viewRelated.setAnchor(this);
            viewRelated.add(new Label("psbNum", new Model(psb.getPsbNum())));
            listItem.add(viewRelated);
            ...

Answer 1

为什么不在 AjaxRequestTarget 中使用纯 javascript 更新客户端 css 样式？应该不会超过

ListItem<?> previousSelected = ...;
ListItem<?> currentSelected = ...;

target.appendJavaScript("document.getElementById('" + previousSelected.getMarkupId() + "').className=\"\";");
target.appendJavaScript("document.getElementById('" + currentSelected.getMarkupId() + "').className=\"selected\";");

这样你不必更新整个列表视图来改变一些类。