जेएसएफ 2.0 + प्राइमफेस 2.x: डेटाटेप पंक्ति के लिए टूलटिप

Question

क्या कोई जानता है कि जब भी कोई उपयोगकर्ता मेरे प्राइमफेस में एक पंक्ति पर होवर करता है तो मैं टूलटिप कैसे दिखा सकता हूं? साथ ही, टूलटिप को प्राइमफेस पेड़ प्रदर्शित करने की आवश्यकता होती है और पेड़ को पॉप्युलेट करने के लिए डेटा को टूलटिप प्रदर्शित होने से पहले लोड करने की आवश्यकता होगी।

मैंने अपने <p:column> पर टूलटिप जोड़कर एक साधारण पीओसी की कोशिश की है, लेकिन टूलटिप केवल उस कॉलम के लिए दिखाता है और मुझे टूलटिप दिखाने के लिए कॉलम में टेक्स्ट को सीधे माउस पर रखना होगा। मेरे पीओओसी में टूलटिप में पेड़ नहीं है क्योंकि मुझे अभी तक उस भाग को नहीं मिला है।

किसी भी मदद/सुझावों की बहुत सराहना की जाएगी।

Answer 1

आप प्राइमफेस के नवीनतम संस्करण में जाने पर विचार कर सकते हैं और इसके लिए ओवरलेपैनेल का उपयोग करना शुरू कर सकते हैं। यह वास्तव में आपकी आवश्यकता के अनुरूप होगा।

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

उपरोक्त उदाहरण में, पंक्तियों का डेटा लेबल में प्रदर्शित होता है क्योंकि उपयोगकर्ता टेबल पंक्तियों पर माउस को स्थानांतरित करता है। हम आपकी आवश्यकता के अनुसार ओवरलेपेनल में पेड़ भी प्रदर्शित कर सकते हैं।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

मैं एक अच्छा समाधान खोजने की कोशिश कर रहा था और प्राइमफ़ेस एक्सटेंशन के साझा टूलटिप को मिला।

मैं अपने कोड में इस समाधान काम किया:

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

datatable जरूरतों एक styleClass, क्योंकि टूलटिप के चयनकर्ता केवल इस तालिका और कोई अन्य तालिकाओं मेल खाना चाहिए।