Анимация вколонны.Текст ограничен одной строкой во всех столбцах, независимо от размера текста - PullRequest
Новая
       4

Анимация вколонны.Текст ограничен одной строкой во всех столбцах, независимо от размера текста

0 голосов
/ 28 ноября 2011

Надеюсь, у вас все будет хорошо.У меня есть ap: dataTable, в котором у меня есть столбцы, подобные этому 

<p:column filterBy="#{Faq.faqCategoryName}"
          headerText="Category"
          filterMatchMode="contains">

    <h:outputText value="#{Faq.faqCategoryName}"
                  style="color: #0d5b7f;" />

</p:column>

<p:column filterBy="#{Faq.question}"
          headerText="Questions"
          filterMatchMode="contains" >

    <h:commandLink value="#{Faq.question}"
                   action="#{faq.viewFaq()}"
                   style="color: #0d5b7f;" >

       <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

</p:column>

<p:column filterBy="#{Faq.answer}"
          headerText="Answers"
          filterMatchMode="contains" >

    <h:outputText value="#{Faq.answer}"
                  style="color: #0d5b7f;" />

</p:column>

<p:column headerText="Action" >

    <h:commandLink action="#{faq.updateFaq}"
                   value="Update"
                   title="Update FAQ Category"
                   style="color: #0d5b7f;text-decoration: underline" >

        <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

    <p:spacer width="3" />

    <h:commandLink action="#{faq.deleteFaq(Faq)}"
                   value="Delete"
                   title="Delete FAQ Category"
                   style="color: #0d5b7f;text-decoration: underline"
                   onclick="if (! confirm('Are you sure, you want to delete the FAQ?') ) { return false;}; return true; ">

        <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

</p:column>

Проблема в том, что столбец Вопросы и ответы может быть настолько большим, насколько это возможно.Теперь, что происходит, если текст в этих столбцах большой, то он переходит к следующей строке в том же столбце.Я хочу, чтобы независимо от длины текста в этих столбцах текст никогда не добавлялся к следующей строке.

Вместо этого я показываю символ эллипса, указывающий, что в этом столбце больше текста, и когда вы наводите курсор мыши на столбец, тогдапоявится окно, которое покажет весь текст.Я имею в виду, что все столбцы должны состоять только из одной строки.Если текст больше, то вместо текста, добавляемого к следующей строке, отображаются эллипсы.Это возможно ?Если да, то как я могу это сделать?Нужно ли использовать jQuery здесь?

Спасибо

Ответы [ 2 ]

0 голосов
/ 29 ноября 2011

Это работает 

<p:column filterBy="#{Faq.question}"
          headerText="Questions"
          filterMatchMode="contains">

    <h:commandLink  id="question"
                    value="#{Faq.partialQuestion}"
                    title="#{Faq.question}"
                    action="#{faq.viewFaq()}"
                     style="color: #0d5b7f;" >

        <f:param name="id" value="#{Faq.faqId}" />

    </h:commandLink>

    <p:tooltip for="question"
               showEffect="fade"
               hideEffect="fade" />

</p:column>

Всплывающая подсказка использует ваш атрибут заголовка, чтобы показать текст на всплывающей подсказке.

Спасибо

0 голосов
/ 28 ноября 2011

Все возможно!

Вы можете использовать это простое решение javascript: http://www.barelyfitz.com/projects/truncate/ (и если вам не нравится событие onclick, вы можете реализовать событие onhover).

Вы можете использовать это решение JQuery: http://henrik.nyh.se/2008/02/jquery-html-truncate.

Но также, поскольку вы выбрали Primefaces, вы можете использовать компонент tooltip . Объедините решение javascript путем усечения значения столбца и укажите полное значение для всплывающей подсказки (также вы можете указать это усеченное значение с сервера): 

<p:column>
   <p:outputText id='myId' value="#{myBean.myTruncatedQuestionValue}" />
   <p:tooltip for="myId" value="#{myBean.myUntruncatedQuestionValue}" showEffect="fade" hideEffect="fade" />  
</p:column>

http://www.primefaces.org/showcase-labs/ui/tooltip.jsf

PS: Когда вы говорите Hope you all will be fine, похоже, что вы объявляете землетрясение ... это печально и неправильно!

...