在 p:schedule header 中添加命令按钮

Question

如何在 p:schedule 中添加 "custom" 按钮？我尝试在 p:dataTable 组件中的 header 方面的帮助下完成它，但无济于事。

抱歉一开始不清楚，有人通过编辑标题来解决我的问题也可能没有帮助，这里有更多详细信息和代码片段。

我想做类似这样的事情：

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

同样按header原理加个按钮，只是这次按计划进行。当然，由于 schedule 没有任何可用于覆盖的方面，因此这种方法不起作用。最后，我的问题是：如何在 p:schedule header 中添加按钮，如上图？

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

Answer 1

客户端，所有 html 都可以用 javascript 操作（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>

您可以将 h:outputText 和 p:commandButton 移动到 jquery dom manipulation 的时间表中。

$("#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）。您还可以使用 class 选择器而不是 id。那取决于你。

但请务必小心使用。正如@JasperDeVries 在评论中提到的那样，破坏事物很容易。只在万不得已的时候谨慎使用它

在 p:schedule header 中添加命令按钮

Adding command button in p:schedule header

jsf

schedule

primefaces