Primefaces Datatable使用多个功能时加载速度慢

时间：2019-01-22 21:06:56

标签： java jsf primefaces

我是jsf的新手，正在创建一个Web应用程序。我有一个页面，该页面由具有许多功能的dataTable组成，因为它将用于动态更新数据库中的行。不幸的是，数据库表中有一百多行，还有几列，我开始对所有素数内容都获得更大的加载时间。我想知道是否有人知道一种改善方法？我的页面最多可能需要5.5秒才能呈现所有表格内容。使用浏览器中的开发人员选项，我知道大约有2.5 MB正在传输，以加载该特定页面的所有内容。我是制作Web应用程序的新手，对优化技术不太熟悉，因此非常感谢所有帮助！

作为一个示例，我创建了一组可复制和粘贴的类，这些类创建了一个类似于我自己的数据表。该代码发布在下面。这确实加载得更快，但是我原来的方法是用相同的方式设计的，但是包含更多的数据和更多的列。加载大约需要1.6秒。如果还有其他需要，请告诉我！

Prod.java 

public class Prod{

private String value1;

private String value2;

private String value3;

private String value4; 

private String value5;

private String value6;

private String value7;

private String value8;

private String value9;

private String value10;

private String value11;

private String value12;

private String value13;

public String getValue1() {
    return value1;
}

public void setValue1(String value1) {
    this.value1 = value1;
}

public String getValue2() {
    return value2;
}

public void setValue2(String value2) {
    this.value2 = value2;
}

public String getValue3() {
    return value3;
}

public void setValue3(String value3) {
    this.value3 = value3;
}

public String getValue4() {
    return value4;
}

public void setValue4(String value4) {
    this.value4 = value4;
}

public String getValue5() {
    return value5;
}

public void setValue5(String value5) {
    this.value5 = value5;
}

public String getValue6() {
    return value6;
}

public void setValue6(String value6) {
    this.value6 = value6;
}

public String getValue7() {
    return value7;
}

public void setValue7(String value7) {
    this.value7 = value7;
}

public String getValue8() {
    return value8;
}

public void setValue8(String value8) {
    this.value8 = value8;
}

public String getValue9() {
    return value9;
}

public void setValue9(String value9) {
    this.value9 = value9;
}

public String getValue10() {
    return value10;
}

public void setValue10(String value10) {
    this.value10 = value10;
}

public String getValue11() {
    return value11;
}

public void setValue11(String value11) {
    this.value11 = value11;
}

public String getValue12() {
    return value12;
}

public void setValue12(String value12) {
    this.value12 = value12;
}

public String getValue13() {
    return value13;
}

public void setValue13(String value13) {
    this.value13 = value13;
}

}

Listen.java 

 import java.io.IOException;
 import java.util.ArrayList;
 import java.util.Random;

 import javax.faces.application.FacesMessage;
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.SessionScoped;
 import javax.faces.context.ExternalContext;
 import javax.faces.context.FacesContext;

 import org.primefaces.event.CellEditEvent;

 import com.regions.product.inventory.beans.Prod;



@ManagedBean(name = "listen")

@SessionScoped
public class Listen{

 private ArrayList<Prod> products;

 boolean firstEdit = true;


public Listen(){

}

public ArrayList<Prod> setup(){


    ArrayList<Prod> result = new ArrayList<>();     

    int numObject = 100;

    int iterations = 0;


    while( iterations < numObject){

        Prod prod = new Prod();

        prod.setValue1("A" + iterations);
        prod.setValue2("B" + iterations);
        prod.setValue3("C" + iterations);

        prod.setValue4("D" + iterations);
        prod.setValue5("E" + iterations);
        prod.setValue6("F" + iterations); 
        prod.setValue7("G" + iterations);
        prod.setValue8("H" + iterations);
        prod.setValue9("I" + iterations);
        prod.setValue10("J" + iterations);
        prod.setValue11("K" + iterations);
        prod.setValue12("L" + iterations);
        prod.setValue13("M" + iterations);

     result.add(prod);

     iterations = iterations + 1;
    }

    return result;

}

public void onCellEdit(CellEditEvent event) {

  Object oldValue = event.getOldValue();
    Object newValue = event.getNewValue();

    if(newValue != null && !newValue.equals(oldValue)) {
        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, 
"Cell Changed", "Old: " + oldValue + ", New:" + newValue);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

if(isFirstEdit()){

    FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new 
FacesMessage(FacesMessage.SEVERITY_INFO,
                "Note",  "To confirm changes, please select 'Save Changes' 
or they will not be saved.") );

        this.setFirstEdit(false);

}

}

public void goTest(){

    System.out.println("Initializing...");

    this.products = setup();

    ExternalContext ec = FacesContext.getCurrentInstance()
            .getExternalContext();

    try {

         ec.redirect(ec.getRequestContextPath()
                    + "/test.xhtml");

    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    System.out.println("Table Structure Made");

}

public boolean isFirstEdit() {
    return firstEdit;
}

public void setFirstEdit(boolean firstEdit) {
    this.firstEdit = firstEdit;
}

public ArrayList<Prod> getProducts() {
    return products;
}

public void setProducts(ArrayList<Prod> products) {
    this.products = products;
}    

}

test.xhtml 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">


<h:head>

</h:head>
<h:body>

<h:form id="form" method="post">

<p:growl id="msgs" showDetail="true" sticky="false">
    </p:growl>
    <div >

        <p:dataTable id="products" var="prod" value="#{listen.products}"
             scrollable="true" scrollHeight="900" 
             editable = "true" editMode="cell" widgetVar= "prodCell">

            <p:ajax event="cellEdit" listener="#{listen.onCellEdit}" update=":form:msgs"/>

            <p:column style="width:16px">
                <p:rowToggler />
            </p:column>

            <p:column filterBy="#{prod.value1}" filterMatchMode="contains" style = "width: 300px;" headerText="Name">

                <p:cellEditor>

                    <f:facet name="output"><h:outputText value="#{prod.value1}" /></f:facet>

                    <f:facet name="input"><p:inputTextarea rows="2" value="#{prod.value1}" style = "width: 96%"/></f:facet>
                </p:cellEditor>

            </p:column>

            <p:column style = "width: 140px;" headerText="Vendor">

                <p:cellEditor >

                    <f:facet name="output"><h:outputText value="#{prod.value2}" /></f:facet>

                    <f:facet name="input">
                        <h:selectOneMenu value="#{prod.value2}" style="width:100%">
                            <f:selectItem itemValue="Y" itemLabel="Yes"/>
                            <f:selectItem itemValue="N" itemLabel="No"/>
                        </h:selectOneMenu>

                    </f:facet>

                </p:cellEditor>

            </p:column>


            <p:column style = "width: 275px;" headerText="Version Release">

                <p:cellEditor>  
                    <f:facet name="output"><h:outputText value="#{prod.value3}" /></f:facet>

                    <f:facet name="input"><p:inputTextarea rows="1" value="#{prod.value3}" style = "width: 96%"/></f:facet>

                </p:cellEditor>
            </p:column>

            <p:rowExpansion>

            <div align="center">
                <p:panelGrid>

                    <p:row>

                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>
                    <p:column><h:outputText styleClass="bold" value="Another Param"></h:outputText></p:column>

                    </p:row>


                    <p:row>

                    <p:column colspan="1">
                    <p:selectOneButton value = "#{prod.value4}">
                    <f:selectItem itemLabel = "Yes" itemValue="Y"/>
                    <f:selectItem itemLabel = "No"  itemValue="N"/>
                    </p:selectOneButton>
                    </p:column>

                    <p:column colspan="1">
                    <p:selectOneButton value = "#{prod.value5}">
                    <f:selectItem itemLabel = "Yes" itemValue="Y"/>
                    <f:selectItem itemLabel = "No"  itemValue="N"/>
                    </p:selectOneButton>
                    </p:column>

                    <p:column colspan="1">
                    <p:selectOneButton value = "#{prod.value6}">
                    <f:selectItem itemLabel = "Yes" itemValue="Y"/>
                    <f:selectItem itemLabel = "No"  itemValue="N"/>
                    </p:selectOneButton>
                    </p:column>

                    <p:column colspan="1">
                    <p:selectOneButton value = "#{prod.value7}">
                    <f:selectItem itemLabel = "Yes" itemValue="Y"/>
                    <f:selectItem itemLabel = "No"  itemValue="N"/>
                    </p:selectOneButton>
                    </p:column>

                    <p:column colspan="1">
                    <p:selectOneButton value = "#{prod.value8}">
                    <f:selectItem itemLabel = "Yes" itemValue="Y"/>
                    <f:selectItem itemLabel = "No"  itemValue="N"/>
                    </p:selectOneButton>
                    </p:column>

                    <p:column colspan="1">
                    <p:selectOneButton value = "#{prod.value9}">
                    <f:selectItem itemLabel = "Yes" itemValue="Y"/>
                    <f:selectItem itemLabel = "No"  itemValue="N"/>
                    </p:selectOneButton>
                    </p:column>

                    <p:column><p:inputText  style=" height: 21px; width: 100px;"  value="#{prod.value10}" /></p:column>
                    <p:column><p:inputText  style=" height: 21px; width: 100px;"  value="#{prod.value11}" /></p:column>
                    <p:column><p:inputText  style=" height: 21px; width: 100px;"  value="#{prod.value12}" /></p:column>
                    <p:column><p:inputText  style=" height: 21px; width: 100px;"  value="#{prod.value13}" /></p:column>

                    </p:row>

                </p:panelGrid>

            </div>

            </p:rowExpansion>

            <f:facet name="footer">
            <div align = "left">
            <p:commandButton value="post" action="#{tables.showChange}" ajax="false"></p:commandButton>
            </div>
            </f:facet>


        </p:dataTable>

    </div>

     <p:contextMenu for="products" widgetVar="pMenu">   
    <p:menuitem value="Edit Cell" icon="pi pi-search" onclick="PF('prodCell').showCellEditor();return false;"/>  
    <p:menuitem value="Hide Menu" icon="pi pi-times" onclick="PF('pMenu').hide()"/>  
</p:contextMenu> 

</h:form>

Index.xhtml 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">


<h:head>    
</h:head>
<h:body>

<h:form name ="indexform" method="post" action="">

<h:commandButton class="button" value = "Test" action ="#{listen.goTest}"
</h:form>

</h:body>
</html>

0 个答案:

没有答案
相关问题
最新问题