JSF 2.0 + Thủ tục 2.x: Chú giải công cụ cho hàng có thể định giá

Question

Có ai biết cách tôi có thể hiển thị chú giải công cụ bất cứ khi nào người dùng di chuột qua hàng trong các vị trí của tôi có thể đặt dữ liệu không? Ngoài ra, chú giải công cụ cần hiển thị cây gốc và dữ liệu để điền vào cây sẽ cần được tải trước khi chú giải công cụ được hiển thị.

Tôi đã thử một đơn giản P.O.C bằng cách thêm chú giải công cụ vào <p:column> nhưng chú giải công cụ chỉ hiển thị cho cột đó và tôi cần phải chuột trực tiếp trên văn bản trong cột cho chú giải công cụ hiển thị. P.O.C của tôi không có cây trong chú giải công cụ vì tôi chưa tìm ra phần đó.

Bất kỳ trợ giúp/đề xuất nào sẽ được đánh giá cao.

Answer 1

Bạn có thể xem xét chuyển sang phiên bản PrimeFaces mới nhất và bắt đầu sử dụng overlayPanel cho việc này. Điều này sẽ chính xác phù hợp với yêu cầu của bạn.

<p:dataTable value="#{myBean.myDetails}" var="myItem" rowIndexVar="rowIndex" > 
    <p:column> 
     <f:facet name="header"> 
      <h:outputLabel value="#"/> 
     </f:facet> 
     <h:outputLabel value="#{rowIndex}" id="myLbl"/> 

     <p:overlayPanel id="myPanel" for="myLbl" showEvent="mouseover" hideEvent="mouseout"> 
       <p:panelGrid columns="2"> 
        <f:facet name="header">Details In Tree</f:facet> 

        <h:outputLabel value="Column 1 of Table" /> 
        <h:outputLabel value="#{dataItem.Col1}" /> 

        <h:outputLabel value="Column 2 of Table" /> 
        <h:outputLabel value="#{dataItem.Col2}" /> 

       </p:panelGrid> 
      </p:overlayPanel> 
    </p:column> 
    ..... 
    ..... 
</p:dataTable> 

Trong ví dụ trên, dữ liệu của hàng được hiển thị trong nhãn khi người dùng di chuyển chuột trên hàng của bảng. Chúng tôi cũng có thể hiển thị cây trong overlayPanel theo yêu cầu của bạn.

Hy vọng điều này sẽ hữu ích.

Answer 2

Tôi đã cố gắng tìm một giải pháp đẹp hơn và tìm thấy chú giải công cụ được chia sẻ của tiện ích mở rộng thủ công.

tôi đã thực hiện công việc giải pháp này trong mã của tôi:

<p:dataTable var="entry" value="#{....}" styleClass="myTable"> 
    <p:column headerText="Header 1"> 
     <h:outputText value="#{entry.value1}" /> 
    </p:column> 

    <p:column headerText="Header 2"> 
     <h:outputText value="#{entry.value2}" /> 
     <pe:tooltip value="This is row number #{rowIndex}" forSelector=".myTable tr[role=row][data-ri=#{rowIndex}]" 
      shared="true" atPosition="top center" myPosition="bottom center" showDelay="500" /> 
    </p:column> 
</p:dataTable> 

Nhu cầu DataTable một styleClass, bởi vì bộ chọn của tooltip chỉ phải phù hợp với bảng này và không có các bảng khác.