2

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

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

根据我的测试，UI:repeat 将始终循环遍历整个列表，我无法在标签内进行部分更新（渲染）。据我所知，它不支持标签内的部分渲染。

我不想添加更多的框架，比如 Rich/Primefaces/tomahawk。

我正在使用最新的 Mojarra。

4

1 回答 1

0

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

本质上，您可以有一个带有预定义的空占位符，id通过 AJAX 调用填充它，<h:commandButton>然后当 HTML DOM 更新时，通过 javascript 移动内容。注意：当您为 JSF 组件分配 id 时，请注意不要将这种方法与命名容器一起使用，例如<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);
    }
}
于 2013-03-11T12:48:02.393 回答