为什么表的tr不能在primefaces中有序显示

Question

我遇到了一个问题，我想在表格底部放置一个multiSelectListbox（不是dataTable）。然而，当我这样做时， 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>

如果你能帮助我，我将不胜感激，虽然是一个建议。

Answer 1

您需要将多选列表框放在单元格中。在您的情况下，您需要 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>