Question

用例如下：我想每次点击渲染10个新行，但不渲染前面的行。所以从理论上讲，我希望它有一个组件总是呈现一个额外的面板组，它引用我接下来的10行（它们是空的）。当用户点击时，我希望只有这个面板组在没有ID的情况下重新渲染，并且新的空面板组添加到底部并带有该ID。

是否有开箱即用的JSF标签可以处理这个或我应该直接潜入自定义标签/渲染器？

根据我的测试，UI：重复将始终循环遍历整个列表，我无法在标记内进行部分更新（渲染）。从我可以告诉它不支持部分渲染标签

我不想再添加像Rich / Primefaces / tomahawk这样的框架。

我正在使用最新的Mojarra。

Answer 1

我不知道JSF中任何能够完成任务的开箱即用组件，但我可以想到可能的解决方法。

基本上，您可以使用预定义id的空占位符，通过<h:commandButton>的AJAX调用填充它，然后在更新HTML DOM后，通过javascript移动内容。需要注意的是：当您为您的JSF组件分配ID时，请注意使用naming containers这种方法，如<h:dataTable>或<ui:repeat>，因为它们控制着孩子的标识符。最后，它只留下元素中定义的样式类。基本的例子如下。

视图：

<h:form id="form">
    <h:panelGroup id="basic">
        <ul class="basic-list">
            <ui:repeat var="data" value="#{bean.basicList}">
                <li class="data-class">#{data.value}</li>
            <ui:repeat>
        </ul>
    <h:panelGroup>
    <h:panelGroup id="additional">
        <ul class="additional-list">
            <ui:repeat var="data" value="#{bean.additionalList}">
                <li class="data-class">#{data.value}</li>
            <ui:repeat>
        </ul>
    <h:panelGroup>
    <h:commandButton value="Load 10 more rows">
        <f:ajax render="additional" onevent="replaceData" listener="#{bean.loadAdditionalData}"/>
    </h:commandButton>
</h:form>

豆：

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Data> basicList;//getter+setter
    private List<Data> additionalList;//getter+setter

    @PostConstruct
    public void init() {
        basicList = new ArrayList<Data>();//populate first rows of data from somewhere
    }

    public void loadAdditionalData(AjaxBehaviorEvent event) {
        additionalList = new ArrayList<Data>();//populate additional rows of data from somewhere
        basicList.addAll(additionalList);//just for a possible postback
    }

}

JavaScript ：

function replaceData(data) {
    if(data.status == 'success') {
        var toAppend = $('#additional-list').html();
        $('#basic-list').append(toAppend);
    }
}

是否有一个JSF2组件可以通过添加/删除组件来处理基于Ajax的分页？

1 个答案: