在检票口中选择时如何更改行的颜色答案

【问题标题】：How to change colour of row when is selected in wicket在检票口中选择时如何更改行的颜色
【发布时间】：2012-08-16 10:09:17
【问题描述】：

我关注this example，但我想更改它。当您单击某行上的任何位置时，我想选择行，而不仅仅是某个值，因此我添加了AjaxEventBehavior。问题是选择了播放器，但行的颜色仍然相同。怎么了？

listItem.add(new AjaxEventBehavior("onclick") {

    private static final long serialVersionUID = 1L;

    @Override
    protected void onEvent(final AjaxRequestTarget target) {
        selectedPlayer = player;
        HighlitableDataItem<Player> hitem = (HighlitableDataItem<Player>) listItem;
        hitem.toggleHighlite();
    }
});

【问题讨论】：

您需要将您的 hitem 添加到 target 以更新它抛出 AJAx
谢谢它的工作原理。更改此评论以回答以接受它
一些附加信息是：如果您需要重新绘制组件（主要是容器），建议将其输出标记 id 设置为 true (component.setOutputMarkupId(true))，以便 wicket 能够通过阿贾克斯。重新绘制检票口时，将从组件使用的模型中拉数据并刷新组件的数据/表示。
我建议在（纯或 jquery）javascript 中执行这种逻辑。使用 Ajax 来设置 HTML 元素的样式可能有点矫枉过正，当服务器处于临界负载水平或客户端连接太慢时，您可能会遇到烦人的延迟。也就是说，如果您正在执行一些服务器端所需的逻辑（例如跟踪所选元素），我会同意使用 Ajax。
请更改您的评论也回答。我想关闭这个问题

标签： java wicket

【解决方案1】：

正如@jordeu 在他的评论中已经指出的那样，您必须将hitem 添加到AjaxRequestTarget：

target.addComponent(hitem);

将组件添加到AjaxRequestTarget 会将组件的标记发送回 XML 响应，其中包含您可能在服务器端对其进行的所有更改以及更新的模型（这对于动态模型很有用）。请记住在要添加到请求目标的组件上调用setOutputMarkupId(true)。 Wicket 需要标记 id（HTML id 属性）来了解 DOM 中的哪个位置来替换 XML 响应中发送的标记。或者，用javadoc的话来说：

应将其标记需要更新的组件添加到此通过 AjaxRequestTarget#addComponent(Component) 方法定位目标。它的身体当目标被渲染并添加到信封中处理并在 ajax 响应时在客户端刷新收到了。

需要更新其标记的组件很重要在生成的标记中包含一个 id 属性，该属性等于从 Component#getMarkupId() 检索的值。这可以实现通过在 html 模板中设置 id 属性，或使用属性修饰符，将添加带有值的属性 Component#getMarkupId() 到标签（如 MarkupIdSetter ）

另外，考虑到使用 Ajax 来设置元素的样式可能有点矫枉过正。如果不需要服务器交互，您可以考虑使用 Javascript/jQuery（如果可用）为元素客户端设置样式。

【讨论】：

【解决方案2】：

最有效的方法是将 javaScript 渲染到您的表中。这样做可以避免往返于服务器，这在这种简单的仅用于样式设置的情况下将是多余的。

您可以通过覆盖 DataTable#newRowItem 并将 AttributeAppender 添加到 RowItem 来实现：

//override this method of the DataTable class
@Override
protected Item<T> newRowItem(String id, int index, final IModel<T> model) {

    Item<T> rowItem = new Item<T>(id, index, model);
    item.add(new AttributeAppender("onclick", "$(this).addClass('selected').siblings().removeClass('selected')",
            " "));

    return rowItem;

}

在您的 CSS 样式表中的“选定”选择器下定义您的选择样式。

【讨论】：