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

Question

如何在p:schedule 中添加“自定义”按钮？我尝试借助 p:dataTable 组件中的标头方面进行此操作，但无济于事。

---

很抱歉一开始不清楚，有人通过编辑它的标题来扼杀我的问题也可能没有帮助，这里有更多关于sn-ps代码的细节。

我想做类似的事情：

                    <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>

代码正在创建一个选项卡（用于手风琴面板），其中包含一个文本+按钮，而不是仅默认文本。

我在 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>

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

P.S：请原谅我用datatable 混淆了你们，使用它是因为它支持多个方面（页眉、页脚）。

Answer 1

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

因此，如果您像这样创建时间表和按钮：

<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 在评论中提到的那样，很容易破坏事情。谨慎使用它，并且仅作为最后的手段