Question

如何在p:schedule中添加“自定义”按钮？我尝试在p:dataTable组件中使用标题构面的帮助下完成它，但无济于事。

很抱歉最初不清楚，它也可能没有帮助有人通过编辑它的标题来诅咒我的问题，这里有更多细节与代码片段。

我想做类似的事情：

                    <p:tab title="#{bean.name}" value="bean" >
                        <f:facet name="title">
                            <h:outputText value="#{bean.name}"/>
                            <p:selectBooleanButton styleClass="...">
                                <p:ajax converter="... />
                            </p:selectBooleanButton>
                        </f:facet>
                    </p:tab>

代码正在创建一个标签（对于accordionpanel），其中包含文本+按钮，而不是默认文本。

我在p：schedule组件中寻找相同的行为。

<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek" >
        <f:facet name="header">
                <h:outputText value="#{bean.name}"/>
                <p:commandButton styleClass="..."/>
        </f:facet>
</p:schedule>

同样在标题原则中添加一个按钮，除了这个时间表。当然，由于时间表没有任何可用于覆盖的方面，这种方法不起作用。最后，我的问题是：如何在p：schedule标题中添加一个按钮，如上图所示？

P.S：请原谅我让你与datatable混淆的人使用它，因为它支持多个方面（页眉，页脚）。

Answer 1

客户端这是所有可以用javascript操作的html（jquery，如果你喜欢）。

因此，如果您按照以下方式创建日程安排和按钮：

<h:panelGroup id="mySchedule">
    <p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek"/>

    <h:outputText value="#{bean.name}" id="scheduleOutputText"/>
    <p:commandButton styleClass="..." id="scheduleCommandButton"/>

</h:panelGroup>

您可以使用jquery dom manipulation将h:outputText和p:commandButton移至计划中。

$("#scheduleCommandButton").insertBefore(".fc-left");
$("#scheduleOutputText").insertBefore("#scheduleCommandButton");

如果您将此脚本放在panelGroup中并在每次通过ajax正常更新计划时更新panelGroup，则应在更新中再次添加按钮和文本。

<h:panelGroup id="mySchedule">
    <p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek"/>

    <h:outputText value="#{bean.name}" id="scheduleOutputText"/>
    <p:commandButton styleClass="..." id="scheduleCommandButton"/>

    $("#scheduleCommandButton").insertBefore(".fc-left");
    $("#scheduleOutputText").insertBefore("#scheduleCommandButton");

</h:panelGroup>

您还可以将文本和按钮放在面板组中，然后通过dom操作移动它。只需确保使用正确的选择器（我没有将表单ID添加到上面的选择器中）。您也可以使用类选择器而不是id。那取决于你。

但请务必谨慎使用。正如@JasperDeVries在评论中提到的那样，很容易打破局面。使用它只是稀疏，小心，只作为最后的手段

在p：schedule标题中添加命令按钮

1 个答案: