个人中心
gpt4 book ai didi

jsf - 如何更新 ? 内的按钮

转载 作者：行者123 更新时间：2023-12-04 07:50:28 25 4
gpt4 key购买 nike

这是我的问题。我有两个 <p: commandLink>里面<ui: repeat> .
当我单击它们时，我需要通过模拟复选框来更新这些按钮。
更新 <panelGroup>附近<ui:repeat>作品。但是，对于包含多个项目的列表，单击更新按钮后，它会使屏幕返回列表顶部，从而无法选择多个项目。有什么方法可以在 <p:commandLink> 中给出更新特定的行吗？ ?

<tbody>
    <ui:repeat value="#{myBean.itens}" var="item" varStatus="index">
        <tr class="myCustomClass" id="item#{item.id}">
            <th>
                <p:commandLink
                    rendered="#{myConditionRendered}"
                    actionListener="#{myBean.deselect(item)}"
                    update=":panelGroupArroundId"
                    process="@this">
                    <i style="font-size: 15px;" class="fa fa-check-square-o" />
                </p:commandLink>
                <p:commandLink
                    rendered="#{!myConditionRendered}"
                    actionListener="#{myBean.select(item)}"
                    update=":panelGroupArroundId"
                    process="@this">
                    <i style="font-size: 15px;" class="fa fa-square-o" />
                </p:commandLink>
            </th>
            <td>
                <h:outputText value="#{item.field1}"/>
            </td>
            ...                                                         
        </tr>
    </ui:repeat>
</tbody>
JSF 版本:2.1
Primefaces 版本:3.5

最佳答案

这里的技巧是只更新你需要的部分——如果你更新整个容器，浏览器将从最近更新发生的点重置和刷新。在 JSF 中，有几种方法可以完成您的需求。较新版本的 JSF(特别是 2.3)具有可用的选择器，例如 :parent允许更轻松地定位页面的特定部分进行更新。使用 2.1，您会受到更多限制。
我做了一个快速测试，并为您的特定用户案例提出了一个工作示例。下图使用的是 Font Awesome 和 PrimeFaces 3.5；
enter image description here
我稍微调整了您的代码并制作了一个完整且有效的示例。在此示例中， Controller 和支持 bean 已分离到单独的类中。首先我们来看看backing bean:

@Data @Named @ViewScoped
public class MyBean implements Serializable {
    @Data @RequiredArgsConstructor
    public static class Item {
        @NonNull private String name;
        private boolean selected;
    }

    private List<Item> items;

    @PostConstruct
    private void init() {
        items = List.of(new Item("a"), new Item("b"), new Item("c"),
            new Item("d"), new Item("e"), new Item("f"), new Item("g"), 
            new Item("h"), new Item("i"), new Item("j")
        );
    }
}
这定义了我们的数据集并使用 Lombok 来最小化样板代码( @Data 和 @RequiredArgsConstructor )的数量。我还添加了一个 selected 标志来跟踪复选框是否被选中。然后在选择和取消选择时在 Controller bean 中使用它: 
@Data @Named @RequestScoped
public class MyBeanController {
    @Inject
    private MyBean myBean;

    public void select(Item item) {
        item.setSelected(true);
    }

    public void deselect(Item item) {
        item.setSelected(false);
    }
}
此外，这里是 View (XHTML) 定义: 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Button update in UI repeat example</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css" />
    </h:head>
    <h:body>
        <table>
            <tbody>
                <ui:repeat value="#{myBean.items}" var="item">
                    <tr style="float: left; padding-right: 10px">
                        <th>
                            <h:form>
                                <h:panelGroup id="content">
                                    <p:commandLink rendered="#{item.selected}"
                                        actionListener="#{myBeanController.deselect(item)}"
                                        update="content" process="@this">
                                        <i class="fa fa-check-square-o" />
                                    </p:commandLink>
                                    <p:commandLink rendered="#{!item.selected}"
                                        actionListener="#{myBeanController.select(item)}"
                                        update="content" process="@this">
                                        <i class="fa fa-square-o" />
                                    </p:commandLink>
                                </h:panelGroup>
                            </h:form>
                        </th>
                        <td><h:outputText value="#{item.name}"/></td>                                                       
                    </tr>
                </ui:repeat>
            </tbody>
        </table>
    </h:body>
</html>
如您所见，我们将按钮包裹在一个表单中并定义了一个容器 content我们在 update 中引用的 p:commandLink 的属性标签。因为我们被包裹在一个表单中，panelGroup 的实际 id 实际上变成了类似 j_idt6:9:j_idt8:content 的东西。与每个 content id 是唯一的(因为每个表单都有一个唯一的 id 生成)。
这允许我们专门针对和更新该行的数据。
理论上可以 update直接使用表单而不将其包裹在 content 中.但是，当包装在 ui:repeat 中时，这样做会干扰表单的生命周期和处理。 .添加额外的 panelGroup并更新它，就像在这个例子中一样，解决了这个问题。

关于jsf - 如何更新 <ui : repeat>? 内的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67013930/

25 4 0
文章推荐： javascript - 排列:推送功能不起作用，JavaScript O(n*n!) 运行时
文章推荐： python - Django DRF Elasticsearch dsl，基于另一个字段数值应用功能提升
文章推荐： next.js - Next-i18next 初始语言环境参数未传递到 serverSideTranslations
文章推荐： python - Int 对象不可下标？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com