启用行虚拟化的表上primefaces 8.0中的筛选器错误

wvyml7n5  于 2021-07-05  发布在  Java
关注(0)|答案(0)|浏览(571)

我正在使用PrimeFaces8.0。包含冻结列的表，以及冻结部分和滚动部分中列的筛选器。行虚拟化已启用。
按钮代码：

  1. <p:commandLink partialSubmit="true" process="@this" action="#{controller.loadCars}"  update=":form:tab1">
  2.     <h:outputText value="Submit"/>
  3. </p:commandLink>

表代码：

  1. <h:form id="form">
  2.     <p:dataTable
  3.         id="tab1"
  4.         scrollable="true"
  5.         scrollHeight="350"
  6.         scrollWidth="900"
  7.         frozenColumns="2"
  8.         var="car"
  9.         scrollRows="5"
  10.         virtualScroll="true"
  11.         lazy="true"
  12.         rows="5"
  13.         rowIndexVar="#"
  14.         value="#{model.cars}"
  15.         widgetVar="carsTable"
  16.         emptyMessage="No cars found with given criteria"
  17.         filteredValue="#{model.filteredCars}">
  18.         <p:ajax event="filter"  />
  19.         <p:columnGroup groupRow="true" type="frozenHeader" >
  20.         <p:row>
  21.             <p:column field="1" headerText="Id"  filterBy="#{car.id}" filterMatchMode="contains"  >
  22.                 <p:inputText style="width:90%;"
  23.                             onchange="PF('carsTable').filter()"
  24.                             onkeyup="PF('carsTable').filter()"
  25.                             onkeypress="if (event.keyCode == 13) { return false; }">
  26.                 </p:inputText>
  27.             </p:column>
  28.             <p:column field="2" headerText="Color" filterBy="#{car.color}" filterMatchMode="contains" >
  29.                 <p:inputText style="width:90%;"
  30.                             onchange="PF('carsTable').filter()"
  31.                             onkeyup="PF('carsTable').filter()"
  32.                             onkeypress="if (event.keyCode == 13) { return false; }">
  33.                 </p:inputText>
  34.             </p:column>
  35.         </p:row>
  36.         </p:columnGroup>
  37.         <p:columnGroup groupRow="true" type="scrollableHeader">
  38.         <p:row>
  39.             <p:column headerText="Id" width="100"/>
  40.             <p:column field="4" headerText="Year" filterBy="#{car.year}" filterable="true" filterMatchMode="contains" width="100">
  41.                 <p:inputText style="width:90%;"
  42.                             onchange="PF('carsTable').filter()"
  43.                             onkeyup="PF('carsTable').filter()"
  44.                             onkeypress="if (event.keyCode == 13) { return false; }">
  45.                 </p:inputText>
  46.             </p:column>
  47.             <p:column headerText="Brand" width="100"/>
  48.             <p:column headerText="Color" width="100"/>
  49.             <p:column headerText="Id" width="100"/>
  50.             <p:column headerText="Year" width="100"/>
  51.             <p:column headerText="Brand" width="100"/>
  52.             <p:column headerText="Color" width="100"/>
  53.             <p:column headerText="Id" width="100"/>
  54.             <p:column headerText="Year" width="100"/>
  55.             <p:column headerText="Brand" width="100"/>
  56.             <p:column field="3" sortBy="#{car.color}" filterBy="#{car.color}" headerText="Color2" filterMatchMode="contains" width="100" >
  57.                 <p:inputText style="width:90%;"
  58.                             onchange="PF('carsTable').filter()"
  59.                             onkeyup="PF('carsTable').filter()"
  60.                             onkeypress="if (event.keyCode == 13) { return false; }">
  61.                 </p:inputText>
  62.             </p:column>
  63.         </p:row>
  64.         </p:columnGroup>
  65.         <p:column headerText="Id" >
  66.         <h:outputText value="#{car.id}"/>
  67.         </p:column>
  68.         <p:column headerText="Color" >
  69.         <h:outputText value="#{car.color}" />
  70.         </p:column>
  71.         <p:column headerText="Id">
  72.         <h:outputText value="#{car.id}" />
  73.         </p:column>
  74.         <p:column headerText="Year">
  75.         <h:outputText value="#{car.year}" />
  76.         </p:column>
  77.         <p:column headerText="Brand">
  78.         <h:outputText value="#{car.brand}" />
  79.         </p:column>
  80.         <p:column headerText="Color">
  81.         <h:outputText value="#{car.color}" />
  82.         </p:column>
  83.         <p:column headerText="Id">
  84.         <h:outputText value="#{car.id}" />
  85.         </p:column>
  86.         <p:column headerText="Year">
  87.         <h:outputText value="#{car.year}" />
  88.         </p:column>
  89.         <p:column headerText="Brand">
  90.         <h:outputText value="#{car.brand}" />
  91.         </p:column>
  92.         <p:column headerText="Color">
  93.         <h:outputText value="#{car.color}" />
  94.         </p:column>
  95.         <p:column headerText="Id">
  96.         <h:outputText value="#{car.id}" />
  97.         </p:column>
  98.         <p:column headerText="Year">
  99.         <h:outputText value="#{car.year}" />
  100.         </p:column>
  101.         <p:column headerText="Brand">
  102.         <h:outputText value="#{car.brand}" />
  103.         </p:column>
  104.         <p:column headerText="Color">
  105.         <h:outputText value="#{car.color}" />
  106.         </p:column>
  107.         <p:column groupRow="true" headerText="Color2" >
  108.         <h:outputText value="#{car.color}" />
  109.         </p:column>
  110.     </p:dataTable>
  111. </h:form>

控制器

  1. import javax.enterprise.context.RequestScoped;
  2. import javax.inject.Named;
  4. @Named
  5. @RequestScoped
  6. public class Controller implements Serializable {
  8.     @Inject
  9.     private Model model;
  11.     public void loadCars(){
  12.         model.getCars().clear();
  13.         List<Car> tempCars = new ArrayList<>();
  14.         for(int i = 0 ; i < 100 ; i++) {
  15.             tempCars.add(new Car( UUID.randomUUID().toString().substring(0, 8), model.getBrands().get((int)(Math.random() * 10)), String.valueOf((int)(Math.random() * 50 + 1960)), model.getColors().get((int) (Math.random() * 10)), (int) (Math.random() * 100000), (Math.random() > 0.5) ? true: false ));
  16.         }
  17.         model.getCars().addAll(tempCars);
  18.     }
  19. }

模型

  1. import javax.enterprise.context.SessionScoped;
  2. import javax.inject.Named;
  3. import java.io.Serializable;
  4. import java.util.ArrayList;
  5. import java.util.List;
  7. import lombok.Data;
  9. @Named
  10. @SessionScoped
  11. @Data
  12. public class Model implements Serializable {
  14.     Model(){
  15.         colors = new ArrayList<>();
  16.         colors.add("Black");
  17.         colors.add("White");
  18.         colors.add("Green");
  19.         colors.add("Red");
  20.         colors.add("Blue");
  21.         colors.add("Orange");
  22.         colors.add("Silver");
  23.         colors.add("Yellow");
  24.         colors.add("Brown");
  25.         colors.add("Maroon");
  27.         brands = new ArrayList<>();
  28.         brands.add("BMW");
  29.         brands.add("Mercedes");
  30.         brands.add("Volvo");
  31.         brands.add("Audi");
  32.         brands.add("Renault");
  33.         brands.add("Fiat");
  34.         brands.add("Volkswagen");
  35.         brands.add("Honda");
  36.         brands.add("Jaguar");
  37.         brands.add("Ford");
  38.     }
  40.     private List<Car> cars = new ArrayList<>();
  41.     private List<Car> filteredCars;
  42.     private List<String> colors;
  43.     private List<String> brands;
  44. }

对象

  1. public class Car implements Serializable {
  3.     public String id;
  4.     public String brand;
  5.     public String year;
  6.     public String color;
  7.     public int price;
  8.     public boolean sold;
  10.     public Car() {}
  12.     public Car(String id, String brand, String year, String color) {
  13.         this.id = id;
  14.         this.brand = brand;
  15.         this.year = year;
  16.         this.color = color;
  17.     }
  19.     public Car(String id, String brand, String year, String color, int price, boolean sold) {
  20.         this.id = id;
  21.         this.brand = brand;
  22.         this.year = year;
  23.         this.color = color;
  24.         this.price = price;
  25.         this.sold = sold;
  26.     }
  28.     public String getId() {
  29.         return id;
  30.     }
  31.     public void setId(String id) {
  32.         this.id = id;
  33.     }
  35.     public String getBrand() {
  36.         return brand;
  37.     }
  38.     public void setBrand(String brand) {
  39.         this.brand = brand;
  40.     }
  42.     public String getYear() {
  43.         return year;
  44.     }
  45.     public void setYear(String year) {
  46.         this.year = year;
  47.     }
  49.     public String getColor() {
  50.         return color;
  51.     }
  52.     public void setColor(String color) {
  53.         this.color = color;
  54.     }
  56.     public int getPrice() {
  57.         return price;
  58.     }
  59.     public void setPrice(int price) {
  60.         this.price = price;
  61.     }
  63.     public boolean isSold() {
  64.         return sold;
  65.     }
  66.     public void setSold(boolean sold) {
  67.         this.sold = sold;
  68.     }
  70.     @Override
  71.     public int hashCode() {
  72.         int hash = 7;
  73.         hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0);
  74.         return hash;
  75.     }
  77.     @Override
  78.     public boolean equals(Object obj) {
  79.         if (obj == null) {
  80.             return false;
  81.         }
  82.         if (getClass() != obj.getClass()) {
  83.             return false;
  84.         }
  85.         final Car other = (Car) obj;
  86.         if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) {
  87.             return false;
  88.         }
  89.         return true;
  90.     }
  91. }

如果关闭行虚拟化，那么表中的过滤器都可以。
将数据筛选到表中时发生primefaces库的js错误。

  1. Uncaught TypeError: can't access property "children", b.bodyTable is undefined
  2.     oncomplete http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  3.     v http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  4.     jQuery 6
  5.     send http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  6.     offer http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  7.     handle http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  8.     ab http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  9.     filter http://localhost:8080/jsf_html4+PR8/ line 2 > injectedScript:1
  10.     callBehavior http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:22
  11.     filter http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  12.     filterTimeout http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  13.     setTimeout handler*bindFilterEvent/< http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  14.     jQuery 2
  15. components.js.xhtml:12:31834
  16.     oncomplete http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  17.     v http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  18.     jQuery 6
  19.     send http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  20.     offer http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  21.     handle http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  22.     ab http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:18
  23.     filter http://localhost:8080/jsf_html4+PR8/ line 2 > injectedScript:1
  24.     callBehavior http://localhost:8080/jsf_html4+PR8/javax.faces.resource/core.js.xhtml?ln=primefaces&v=8.0:22
  25.     filter http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  26.     filterTimeout http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  27.     (Асинхронный: setTimeout handler)
  28.     bindFilterEvent http://localhost:8080/jsf_html4+PR8/javax.faces.resource/components.js.xhtml?ln=primefaces&v=8.0:12
  29.     jQuery 2
JavaJavaScriptjsfprimefacesprimefaces-datatable

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com