Question

我有一个包含31列和60行的数据表，渲染速度非常慢。它逐个呈现细胞。性能与数据库无关，我创建了表现出相同性能的模拟数据集。我无法减少列数，需要立即显示整月。

我正在使用PrimeFaces 3.5，没有升级选项。

有加速渲染的技巧吗？

我创建了以下数据表：

    <p:dataTable id="calendar" value="#{calendarView.calendarData.entrySet().toArray()}" var="row" frozenColumns="1" scrollable="true" >
        <p:columnGroup type="header">
            <p:row>
                <p:column headerText="#{msgs.calendar_roomNumber}" style="text-align: right; float:right; width:100px;"/>
                <c:forEach items="#{calendarView.columnData}" var="column">
                    <p:column headerText="#{column}"/>
                </c:forEach>
            </p:row>
        </p:columnGroup>
        <p:column headerText="Szoba">
            <h:outputText value="#{row.key.roomNumber}" />
        </p:column>
        <c:forEach items="#{calendarView.columnData}" var="column">
            <p:column style="background-color:#{not empty row.value[column]?row.value[column].getRoomState().toString():''}">
                <h:outputText value="SZ" id="column#{column}" rendered="#{empty row.value[column]}" />
                <p:tooltip id="toolTipFadeColumn#{column}" for="column#{column}" position="top" escape="false" value="#{row.value[column].label}" />


                <h:outputText rendered="#{not empty row.value[column] and row.value[column].endStaying}" value="-&gt;" id="columnend#{column}"/>
                <h:outputText rendered="#{not empty row.value[column] and row.value[column].startStaying}" value="&lt;-" id="columnstart#{column}"/>

                <p:tooltip id="toolTipFadeEnd#{column}" for="columnend#{column}" position="top" escape="false" value="#{row.value[column].label}" rendered="#{not empty row.value[column].label}"/>
                <p:tooltip id="toolTipFadeStart#{column}" for="columnstart#{column}" position="top" escape="false" value="#{row.value[column].label}" rendered="#{not empty row.value[column].label}"/>
            </p:column>
        </c:forEach>
    </p:dataTable>

calendarData有60个元素，并且具有以下bean的Map<Room,Map<Long,RoomCell>>结构：

public class RoomCell {
    private boolean endStaying=false;
    private boolean startStaying=false;
    private RoomState roomState=RoomState.FREE;
    private String labels;
...
}

@Entity
@Table(name = "room")
public class Room extends AbstractModelImpl implements Comparable{

    @Column(name = "room_number", unique = true)
    private int roomNumber;

    @Column(name="room_type")
    @Enumerated(EnumType.STRING)
    private RoomType roomType;

    @OneToMany(mappedBy = "id", fetch = FetchType.LAZY)
    private List<Staying> stayings;
...
}

Answer 1

在摆弄dataTable之后，我创建了具有足够（不完美）性能的dataTable优化版本。我做了以下修改：

删除所有内部循环（c：forEach）

所有工具提示都替换为标题属性

<p:dataTable id="calendar" value="#{calendarView.calendarData.entrySet().toArray()}" var="row" frozenColumns="1" scrollable="true" scrollHeight="600"  scrollWidth="1300">
    <p:column style="width: 50px; text-align: right">
        <f:facet name="header">
            <h:outputText value="#{msgs.calendar_room}" />
        </f:facet>
        <h:outputText value="#{row.key.roomNumber}" />
    </p:column>
    <p:columns value="#{calendarView.columns}" var="column" style="text-align: center; #{not empty row.value[column].color ? 'background-color:'.concat(row.value[column].color):''}">
        <f:facet name="header">
            <h:outputText value="#{column}" />
        </f:facet>
        <h:outputText rendered="#{row.value[column].endStaying == true}" value="-&gt;" id="endStaying">
            <f:attribute name="title" value="#{row.value[column].label}" escape="true" />
        </h:outputText>
        <h:outputText rendered="#{row.value[column].startStaying == true}" value="&lt;-" id="startStaying" >
            <f:attribute name="title" value="#{row.value[column].label}" escape="true" />
        </h:outputText>
        <h:outputText rendered="#{row.value[column].endStaying == false and row.value[column].startStaying == false and not empty row.value[column].label}" value="-" id="staying" >
            <f:attribute name="title" value="#{row.value[column].label}" escape="true" />
        </h:outputText>
    </p:columns>
</p:dataTable>

p：数据表缓慢渲染

1 个答案: