Блог

Главная - Вопросы по программированию - Почему tr таблицы не может быть отображен упорядоченно в primefaces

Почему tr таблицы не может быть отображен упорядоченно в primefaces

#html #jsf #primefaces #html-table

#HTML #jsf #primefaces #html-таблица

Вопрос:

Я столкнулся с проблемой.Дело в том, что я хочу разместить multiSelectListbox внизу таблицы (не с данными). Однако, когда я это делаю, multiSelectListbox отображается в верхней части таблицы.

Ниже приведены мои коды:

 <table id="addBookTable" class="common_tab" style="width: 100%;">
    <tr>
        <th><span style="color: red;">*</span>BookName:</th>
        <td><p:inputText styleClass="inputTextClass" id="input_text_1"
                placeholder="Input book name" value="#{bookView.newBook.name}"
                onblur="onLeave(this)">
            </p:inputText></td>
        <td>
            <h:outputLabel styleClass="errorTipClass" value="book name must be not empty"
             id="errorTip1" binding="#{errorTip1}"/>
        </td>
        <th><span style="color: red;">*</span>ISBN:</th>
        <td><p:inputText styleClass="inputTextClass" id="input_text_2"
                onkeypress="return (/[d.]/.test(String.fromCharCode(event.keyCode)))"
                placeholder="Input book's ISBN" maxlength="13" value="#{bookView.newBook.isbn}"
                onblur="onLeave(this)">
            </p:inputText></td>
        <td><p:outputLabel  styleClass="errorTipClass" value="Must be thirteen bits number" 
        id="errorTip2" binding="#{errorTip2}" /></td>
    </tr>
    <tr>
        <th><span style="color: red;">*</span>author:</th>
        <td><p:inputText styleClass="inputTextClass" id="input_text_3"
                placeholder="Input book's author" value="#{bookView.newBook.author}"
                onblur="onLeave(this)"/></td>
        <td><p:outputLabel  styleClass="errorTipClass" value="author must be not empty" 
        id="errorTip3"  binding="#{errorTip3}" /></td>
        <th><span style="color: red;">*</span>press:</th>
        <td><p:inputText styleClass="inputTextClass" id="input_text_4"
                placeholder="Input book's press" value="#{bookView.newBook.press}"
                onblur="onLeave(this)"/></td>
        <td><p:outputLabel  styleClass="errorTipClass" value="press must be not empty"
         id="errorTip4" binding="#{errorTip4}" /></td>
    </tr>
    <tr>
        <th><span style="color: red;">*</span>price:</th>
        <td><p:inputText styleClass="inputTextClass" id="input_text_5"
                style="text-align:right;" placeholder="Input book's price" 
                value="#{bookView.newBook.price}" onblur="onLeave(this)"/></td>
        <td><p:outputLabel  styleClass="errorTipClass" value="Input is invalid" 
        id="errorTip5" binding="#{errorTip5}" /></td>
        <th><span style="color: red;">*</span>Publication Date:</th>
        <td><p:calendar effect="fold" pattern="yyyy-MM-dd" navigator="true"
                yearRange="c-50:#{bookView.currentYear}" lang="zh_CN"
                id="newBookPublicationDate" placeholder="Choice book's date of publication"
                onblur="this.style.border = '2px green solid'" readonlyInput="true"
                value="#{bookView.newBookDate}" style="height:25px;"/></td>
    </tr>
    <tr>
         <p:multiSelectListbox value="#{bookView.newBook.category}" effect="slide" header="Categories" showHeaders="true">
            <f:selectItems value="#{bookView.categories}" />
        </p:multiSelectListbox>
    </tr>
</table>

Я буду признателен, если вы сможете мне помочь, хотя и советом.

Комментарии:

1. Этот вопрос не связан с jsf, PrimeFaces или java-ee. Это обычная проблема html. Это не удалось бы с простым вводом html или div или любым другим. Вам нужен td или th внутри tr… простой и понятный

2. Да. Этот вопрос — всего лишь простая проблема html. Я попробовал этот метод в качестве вашего совета, прежде чем опубликовать этот вопрос. Однако это не работает. Использование атрибута colspan может решить этот вопрос.

3. @Emil Alkalay Пожалуйста, не используйте неправильные теги. Сначала прочитайте описание тега!

Ответ №1:

Вам нужно поместить свой multiselectlistbox в ячейку.В вашем случае вам потребуется colspan:

 <tr><td colspan="5">
    <p:multiSelectListbox value="#{bookView.newBook.category}" effect="slide" header="Categories" showHeaders="true">
        <f:selectItems value="#{bookView.categories}" />
    </p:multiSelectListbox
 </td></tr>

Комментарии:

1. Большое вам спасибо. Я попытался применить этот метод, и мне удалось решить его после публикации этого вопроса. Причина, по которой multiSelectListBox не может отображаться как мой дизайн, заключается в том, что атрибут colspan тега td по умолчанию равен 1. Спасибо за ваш восторженный ответ.