Question

对于类似下面的代码，当光标悬停在列标题上时，标题不会出现。有任何想法吗？

        <h:column title="COLUMN 1">
            <f:facet name="header" >COL 1</f:facet>
            <h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al"/>
        </h:column>

        <h:column title="COLUMN 2">
            <f:facet name="header" >COL 2</f:facet>
            <h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al"/>
        </h:column>

Answer 1

<h:column>标记没有HTML 4.0传递属性，因为JSF仅将其生成为<td>元素。在HTML中，表格由行中的<td>元素组成，列在行中隐式定义。

因此，它喜欢为每一行的每个特定<td>元素指定title属性。

<table border="1">
  <tr>
   <td title="first">Cell A1</td>
   <td>Cell B1</td>
  </tr>
  <tr>
   <td title="first">Cell A2</td>
   <td>Cell B2</td>
  </tr>
</table>

因此，没有什么比在HTML中指定列的整体标题，您可以为<table>标记添加标题，这只是<h:dataTable>。

或者，您可以通过向该列中的组件添加标题来为单个数据单元格设置标题，如下所示：

<h:column>
      <f:facet name="header" >COL 1</f:facet>
      <h:outputText id="col1" value="#{oneEntry.col1}" styleClass="al"  title="COLUMN 1"/>
</h:column>

 <h:column>
      <f:facet name="header" >COL 2</f:facet>
      <h:outputText id="col2" value="#{oneEntry.col2}" styleClass="al" title="COLUMN 2"/>
</h:column>

生成一个<span>，其中包含带有title属性的outputText的值。

Answer 2

如果您使用Primefaces，则可以使用类似的代码

< script >
  export default {
    data() {
      return {
        ticketInvoices: {},
        vendors: null,
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_grand_total: "",

          ticketInvoiceItems: [{
            id: "",
            ticket_invoice_id: "",
            passenger_name: "",
            ticket_no: "",
            departure_date: "",
            fares: "",
            sub_total: ""
          }]
        })
      };
    },

    methods: {
      createTicketInvoice() {
        this.form
          .post("api/ticket-invoice")
          .then(() => {
            Fire.$emit("RefreshTable");
          })
          .catch(() => {
            swal("Failed!", "There was something wrong.", "warning");
          });
      },

      addItems() {
        this.form.ticketInvoiceItems.push({
          id: "",
          ticket_invoice_id: "",
          passenger_name: "",
          ticket_no: "",
          departure_date: "",
          fares: "",
          sub_total: ""
        });
      },
      removeItems(pos) {
        this.form.ticketInvoiceItems.splice(pos, 1);
      },
      <
      /script>

我认为解决您的问题的方法是像在示例中所做的那样定义<p:column> <f:facet name="header"> <h:outputText value="TYPE" title="LINK-TYPE (DIRECT,TDR,TLGA)"/> </f:facet> <h:outputText escape="false" value="#{test.getLinkType()}"/> </p:column>并将<f:facet>放入<h:outputText>！

使用您的示例，您将获得以下代码

<f:facet>

将鼠标悬停在数据表的列上时不会出现标题

2 个答案: