Question

如果使用ajax更新（只是标题，没有其他内容）在标签上显示某些特定内容，我试图使某些标签的标题加下划线。目前它只有在刷新页面或整个组件时才有效（但由于数据库加载了大量数据，这是个坏主意。）

有可能吗？我试图在客户端使用jQuery（通过href获取元素）和bean（RequestConext.getCurrentInstance（）。update（））来获取和更新此组件，但是没有成功。

生成的html（样式不包括在内）：

<div id="m_tabview" style="display: block;" data-widget="m_tabviewWv">
  <ul role="tablist">
    <li role="tab" aria-expanded="true">
        <a href="#m_tabview:j_idt25">Basic information</a>
    </li>
    <li role="tab" aria-expanded="false">
        <a href="#m_tabview:documentsTab">
            <u>Documents</u>
        </a>
    </li>
    <li role="tab" aria-expanded="false">
        <a href="#m_tabview:j_idt191">Social data</a>
    </li>
    <li role="tab" aria-expanded="false">
        <a href="#m_tabview:contactsTab">
            Contacts
        </a>
    </li>
    ...
  </ul>
</div>

并且有两个标签具有可变标题：文档（已加下划线）和联系人。

XHTML代码如下所示：

<p:tabView id="m_tabview" widgetVar="m_tabviewWv" scrollable="false">
  <p:tab title="Basic information">
    <h:form id="base_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="documentsTab" name="documentsTab" title="#{clientform.documentsHeaderInline}">
    <h:form id="documents_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab title="Social data">
    <h:form id="social_data_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="contactsTab" title="#{clientform.contactsHeaderInline}">
    <h:form id="сontacts_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
</p:tabView>

当用户按下＆＃34;保存＆＃34;按钮，支持的bean clientform如果需要更改标题，然后我需要动态更新它们，但我不知道如何。

Primefaces版本是4.0.6，遗憾的是目前无法更新。

Answer 1

由于PrimeFaces中没有渲染器，因此无法更新单个选项卡。您可以尝试将标题移动到f:facet name="title"...，放置h:outputText id="tabIdTitle"...并在需要时更新该outputText。从PF 3.2开始支持这一点。像

这样的东西

<p:tabView id="m_tabview" widgetVar="m_tabviewWv" scrollable="false">
  <p:tab title="Basic information">
    <h:form id="base_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="documentsTab" name="documentsTab">
    <f:facet name="title">
       <h:outputText id="documentsTabTitle" value="#{clientform.documentsHeaderInline}" />
    </f:facet>
    <h:form id="documents_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab title="Social data">
    <h:form id="social_data_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="contactsTab">
    <f:facet name="title">
      <h:outputText id="contactsTabTitle" value="#{clientform.contactsHeaderInline} "/>
    </f:facet>
    <h:form id="сontacts_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
</p:tabView>

Answer 2

感谢Kukeltje和Geinmachi！

正确的方法是使用facet（但是单独使用CSS样式，因为如果你使用CSS inline，标签将按原样显示，文本不会加下划线）：

<p:tab id="documentsTab" name="documentsTab">
  <f:facet name="title">
    <h:outputText id="documentsTabTitle" value="Documents" style="#{clientform.documentsHeaderInline}"/>
  </f:facet>
...
</p:tab>

和（如果需要，在托管bean中）：

documentsHeaderInline = "text-decoration: underline;";

如何仅更新p：tabView / p：accordion或类似组件中的选项卡标题？

2 个答案: