Question

我正在执行一个页面，其中显示一些标签和输入文本字段，以便用户可以引入一些数据并将其发送回服务器。但有时服务器会发回超过50行的信息。在这种情况下，用户需要多次scoll以查看所有字段。我想创建2/3 div，每个包含大约20个字段，这样所有字段都可以显示而不需要滚动。有什么想法吗？

这是我的代码

<div class="container">
    <div class="row">
        <f:view>
            <h:form>
                <h:dataTable value="#{Message.bits}" var="bit">
                    <h:column>
                        <div class="col-lg-4">
                            <h:outputText value="#{bit.id} #{bit.name}" />
                            <div class="input-group">
                                <h:inputText styleClass="form-control" size="100"
                                    maxlength="100" value="#{bit.value}" />
                            </div>
                            </p>
                        </div>
                    </h:column>
                </h:dataTable>
            </h:form>
        </f:view>
    </div>
</div>

类消息 - ＆gt;一个容器的位。它是一个bean管理器

@ManagedBean
@ViewScoped
public class Message implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 2712306195992874273L;

    private List<Bit> bits = null;

    public List<Bit> getBits() {
            return bits;
        } 
    //Do more things

比特等级

public class Bit implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = -6341896264030346040L;

    private String name = null;

    private String value = null;

    private int id = 0;

   //Business logic

我可以使用html，css，任何js框架，jsp，java。

感谢您的时间。

Answer 1

如果我的问题正确，您希望显示如下数据：

1   4   7
2   5   8
3   6   9

而不是：

我不知道这是否是最佳解决方案，但它对我有用。

您可以尝试以下代码。

 <div class="row">

   <ui:repeat var="bit" value="#{message.bits}" varStatus="bitstatus">
       <h:outputText escape="false" value="&lt;div class='col-lg-4'&gt;" rendered="#{(bitstatus.index + 1) % 20 eq 1}" />

       <h:outputText value="#{bit.id} #{bit.name}" />

       <div class="input-group">
         <h:inputText styleClass="form-control" size="100" maxlength="100" value="#{bit.value}" />
       </div>

       <h:outputText escape="false" value="&lt;/div&gt;" rendered="#{(productstatus.index + 1) % 5 eq 0}" />
   </ui:repeat>


 </div>

JSP数据表限制每个div上的行数

1 个答案: