當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表

發(fā)布時間：2023/12/3 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這次，我想與您分享我最近從JSF 2.2功能中學(xué)到的知識。為此，我決定創(chuàng)建一個簡單的ajax，可滾動的延遲加載數(shù)據(jù)表。

請注意，絕不這是相當大的庫如Primefaces ， RichFaces的或ICEFaces的。這只是為了告訴您我學(xué)到了什么。（當然，如果您愿意，沒有人可以阻止您使用它）。

這個概念

請允許我先告訴您這個概念，或者如果您愿意的話，請告訴您這種情況。實際上非常簡單。

我們有一個Customer實體的列表，基本上，我們將實現(xiàn)一個數(shù)據(jù)表，該表是可滾動的，可以延遲加載列表并使用ajax。

注意：我假設(shè)您對JPA和EJB感到滿意，因此盡管我可能在這里和那里提到它們，但在本文中不再討論。

使用模板

就像任何JSF應(yīng)用程序一樣，我也從使用模板開始。將模板與Netbeans一起使用非常容易。只需選擇選項Facelets模板并選擇您的布局即可。

注意，Netbeans還會生成兩個樣式表cssLayout.css和default.css 。還要注意，在新生成的模板中，它們使用文件位置進行定位，如下所示：

<h:head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="./../resources/css/default.css" rel="stylesheet" type="text/css" /><link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" /><title>Facelets Template</title> </h:head>

我對默認模板進行了許多修改。

首先，啟動應(yīng)用程序服務(wù)器時遇到一個問題，即樣式表未正確加載。因此，要解決此問題，我使用了JSF Resource Locator （Lubke 2008）。

我還創(chuàng)建了每個子頁面，即頁眉，菜單和頁腳。如果未指定，則它們充當默認值。

因此，我的頁面集合如下：

template.xhtml

注意，我使用h:outputStylesheet而不是使用文件定位器./../resources/css/default.css 。使用這種方法，只需將所有資源放在resources目錄中，并通過屬性library指向包含您的資源的文件夾來指向它即可。因此，例如<h:outputStylesheet library="css" name="default.css" />確實是在resources/css/default.css位置查看文件。

header.xhtml，footer.xhtml，menu.xhtml

<?xml version="1.0" encoding="UTF-8"?> <!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"><body><ui:composition><h1>Default Header</h1></ui:composition> </body> </html>

接下來，使用模板。因此，我們創(chuàng)建一個名為customers.xhtml的文件來使用它。

customer.xhtml

然后，您可以運行應(yīng)用程序服務(wù)器并通過http://<the path to your application>/customers.jsf訪問該頁面。輸出應(yīng)如下圖所示。

添加設(shè)施以創(chuàng)建客戶

首先，在模板中，讓我們添加一個工具以在customers.xhtml中添加customers.xhtml 。我們可以簡單地使用JSF ManagedBean來做到這一點。但是，Core Javaserver Faces第三版建議：

對于可以在JSF頁面中使用的bean，有兩種單獨的機制（CDI bean和JSF管理的bean）是歷史上的意外。我們建議您使用CDI bean，除非您的應(yīng)用程序必須在諸如Tomcat之類的普通servlet運行程序上運行。

（Geary，Horstmann，2010年）

按照建議，從現(xiàn)在開始，我將使用CDI bean。

在實際的應(yīng)用程序中，我確信還有很多數(shù)據(jù)要捕獲。但是，在此示例中，讓我們僅捕獲客戶的姓名。

基本上，我們需要一個Model和一個Controller 。因此，讓我們首先創(chuàng)建這些類。

CustomerData.java

package id.co.dwuysan.customer;import javax.enterprise.inject.Model; import javax.validation.constraints.NotNull; import javax.validation.constraints.Size;@Model public class CustomerData {@NotNull@Size(min = 1, max = 50)private String name;public String getName() {return name;}public void setName(String name) {this.name = name;}void clear() {setName(null);} }

CustomerData.java

package id.co.dwuysan.customer;import id.co.dwuysan.service.CustomerService; import javax.ejb.EJBException; import javax.faces.application.FacesMessage; import javax.faces.context.FacesContext; import javax.faces.event.AbortProcessingException; import javax.faces.event.ActionEvent; import javax.inject.Inject; import javax.inject.Named; import javax.validation.ConstraintViolation; import javax.validation.ConstraintViolationException;@Named public class CustomerRegistationAction {@Injectprivate CustomerData customer;@Injectprivate CustomerService customerService;public void register(ActionEvent event) {try {// calls EJB and do registration here} catch (EJBException e) {FacesContext.getCurrentInstance().addMessage(event.getComponent().getClientId(), new FacesMessage(e.getMessage()));throw new AbortProcessingException(e.getMessage());}this.customer.clear();} }

注意，在這種情況下，我們使用@Named注釋。由于我們沒有給它任何范圍注釋，因此默認為@RequestScoped （BalusC 2011a）。

下一步是修改我們的customers.xhtml以使用這些類，以便我們可以注冊客戶。

customer.xhtml

好的，一旦完成，您就可以注冊客戶。屏幕應(yīng)如下所示。

定義“合同”

這部分是真正的交易。我所說的“合同”不是實際的合同本身。相反，我指的是我們首先設(shè)計Facelet xhtml的方式，這將驅(qū)動實際的后備bean類。

因此，讓我們首先概述一下需求：

記錄應(yīng)在表中分頁，并從數(shù)據(jù)庫中延遲加載
用戶應(yīng)該能夠選擇一個頁面中顯示多少條記錄
用戶應(yīng)該能夠查看當前頁面是什么，頁面總數(shù)和記錄
用戶應(yīng)該能夠滾動瀏覽下一個和上一個記錄
使用AJAX

在一個應(yīng)用程序中，必然會有很多清單。因此，前進的最佳方法是創(chuàng)建一個易于重用的組件。由于組件本身由許多其他組件組成，因此我相信此功能正式稱為復(fù)合組件。在JSF 1.x時代，這非常痛苦。開發(fā)人員需要編寫許多類/文件。使用JSF 2.x，這非常容易（我必須說，這非常優(yōu)雅）。

讓我們從創(chuàng)建組件開始。

創(chuàng)建復(fù)合組件

我將這個組件命名為paginator 。

我相信您會找到很多關(guān)于如何執(zhí)行此操作的解釋，因此我將跳過“說明”部分，僅向您展示我的操作。

我在resources/ezcomp目錄下創(chuàng)建了一個文件paginator.xhtml 。因此，稍后我將使用命名空間xmlns:ez="http://java.sun.com/jsf/composite/ezcomp來引用此組件。

讓我們繼續(xù)進行paginator.xhtml的實際實現(xiàn)。請參考以下資源，然后我將逐步指導(dǎo)您。

paginator.xhtml

<?xml version='1.0' encoding='UTF-8' ?> <!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:cc="http://java.sun.com/jsf/composite"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"><cc:interface><cc:attribute name="paginateModel" /> </cc:interface><cc:implementation><h:inputHidden value="#{cc.attrs.paginateModel.sortField}" /><h:inputHidden value="#{cc.attrs.paginateModel.ascending}" /><h:inputHidden value="#{cc.attrs.paginateModel.page}" /><h:panelGrid columns="2" cellpadding="5" cellspacing="5"><h:outputLabel value="Rows-per-page" /><h:selectOneRadio value="#{cc.attrs.paginateModel.rowsPerPage}"><f:selectItem itemValue="5" itemLabel="5" /><f:selectItem itemValue="10" itemLabel="10" /><f:selectItem itemValue="20" itemLabel="20" /><f:selectItem itemValue="100" itemLabel="100" /><f:ajax execute="@form" render="@form" listener="#{cc.attrs.paginateModel.updateRowsPerPage}" /></h:selectOneRadio></h:panelGrid><h:panelGrid columns="3" cellpadding="5" cellspacing="5"><h:commandLink value="<<" actionListener="#{cc.attrs.paginateModel.navigatePage(false)}" style="display: #{cc.attrs.paginateModel.page gt 1 ? 'block' : 'none'}"><f:ajax execute="@form" render="@form" /></h:commandLink><h:outputLabel value="#{cc.attrs.paginateModel.page} ? #{cc.attrs.paginateModel.totalPages} " /><h:commandLink value=">>" actionListener="#{cc.attrs.paginateModel.navigatePage(true)}" style="display: #{cc.attrs.paginateModel.page lt cc.attrs.paginateModel.totalPages ? 'block' : 'none'}"><f:ajax execute="@form" render="@form" /></h:commandLink></h:panelGrid><cc:insertChildren /><br /><h:outputFormat value="There are {0} record(s)."><f:param value="#{cc.attrs.paginateModel.recordCount}" /></h:outputFormat></cc:implementation> </html>

下一節(jié)將說明我在customers.xhtml提出的每個編號點。

01. cc:attribute和paginatedModel

這部分是此xhtml中的實現(xiàn)以及此組件的客戶端/用戶之間的'interface' 。簡而言之，將其視為使用此組件時必須提供的參數(shù)。

02.隱藏參數(shù)

現(xiàn)在這部分有很多解釋。

首先，我需要快進一點以告訴您我正在使用RequestScoped bean支持記錄列表。還要注意的另一件事是，我實際上使用了<f:view transient="true"> ，這是JSF 2.2中可用的功能，因此使該頁面變?yōu)闊o狀態(tài)。如果您在瀏覽器中開源，則狀態(tài)現(xiàn)在為：

由于此頁面是無狀態(tài)的，因此您需要在兩次調(diào)用之間管理自己的狀態(tài)（Riem 2013）。因此使用隱藏參數(shù)。想象一下，假設(shè)您正在顯示100頁中的第4頁，并且用戶決定導(dǎo)航到下一頁，因為它是無狀態(tài)的，所以您需要知道現(xiàn)在是哪一頁，無論當前顯示是按升序還是降序列出以及目前的排序方式。

03.每頁行數(shù)選擇

這一部分很不言自明，只有一部分。基本上，我們列出了供用戶選擇的選項，以供選擇以每頁顯示多少條記錄。當用戶選擇時，我們需要使用AJAX重新執(zhí)行查詢并更新頁面。因此，本節(jié)的使用：

<f:ajax execute="@form" render="@form" listener="#{cc.attrs.paginateModel.updateRowsPerPage}" />

本部分的內(nèi)容基本上是基于用戶選擇，執(zhí)行方法updateRowsPerPage并更新此form 。如第02節(jié)所述， 'execute'還意味著我們正在考慮這種form所有參數(shù)。

04/06。 導(dǎo)航“后退”和“前進”

我將在本節(jié)中一起解釋04和06部分，因為它們非常相似。

讓我們從第04部分開始。這基本上將呈現(xiàn)一個鏈接，以允許用戶導(dǎo)航'Back' 。僅在當前頁面不是第一頁的情況下，我才簡單地使用display屬性來進行條件渲染（否則，將無法導(dǎo)航回第一頁，對嗎？）。第6部分非常相似，條件是僅在當前頁面不是最后一頁時才呈現(xiàn)。

我要說明的下一部分是單擊該頁面時的actionListener 。基本上，我們現(xiàn)在知道由于h:inputHidden （參見02節(jié)），當前頁面是什么。因此，使用04和06部分中的兩個命令鏈接，我們需要標記這是哪種導(dǎo)航。為此，我只使用布爾值。

最后，因為我們想使用AJAX進行導(dǎo)航，所以我們還需要使用<f:ajax> 。同樣，與前面的部分有關(guān)在@form上execute和render原因相同。

05當前頁和總頁數(shù)

這部分只是呈現(xiàn)當前頁面和可用頁面總數(shù)。不言自明

06見第04節(jié)

見第04節(jié)

07 insertChildren

盡管我們可以重復(fù)使用分頁器，但我認為創(chuàng)建一個將數(shù)據(jù)模型自動呈現(xiàn)到表中的組件非常困難。至少，頁面設(shè)計者需要確定要呈現(xiàn)的列（我確信必須有一種神奇的方式以表格方式自動呈現(xiàn)所有內(nèi)容。也許Oracle ADF Faces會為您做到這一點。無論如何，我不必費心找到它）。

使用此標記時，基本上稍后使用<ezcomp:paginator>...</ezcomp:paginator> ，插入之間的任何內(nèi)容都將在第07部分呈現(xiàn)。考慮一下類似<ui:decorate> 。

08顯示總記錄

對于此部分，我們只顯示總記錄。不言自明。

使用復(fù)合組件

現(xiàn)在，我們基本上需要使用此復(fù)合組件。因此，我們需要如下修改我們的customers.xhtml ：

customer.xhtml

<?xml version='1.0' encoding='UTF-8' ?> <!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:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> <body><ui:composition template="./common/template.xhtml"><ui:define name="content"><f:view transient="true"><h:form id="frmCreateCustomer"><h:panelGrid columns="3"><h:outputLabel for="txtCustomerName" value="Customer name" /><h:inputText id="txtCustomerName" value="#{customerData.name}" /><h:message for="txtCustomerName" styleClass="error" /><div /><h:commandButton id="cmdRegisterCustomer" value="Submit" action="customers" actionListener="#{customerRegistationAction.register}"><f:actionListener binding="#{listCustomers.sortByDefault}" /><f:ajax execute="@form" render="@form :frmListCustomers" /> </h:commandButton><h:message for="cmdRegisterCustomer" styleClass="error" /></h:panelGrid></h:form><br /><h:form id="frmListCustomers"> <ez:paginator paginateModel="#{listCustomers}"> <h:dataTable value="#{listCustomers.data}" var="cust"> <h:column><f:facet name="header"><h:commandLink value="Name" actionListener="#{listCustomers.sort('name')}"><f:ajax execute="@form" render="@form" /> </h:commandLink></f:facet><h:outputText value="#{cust.name}" /></h:column></h:dataTable></ez:paginator></h:form></f:view></ui:define></ui:composition></body> </html>

同樣，我將一步一步地指導(dǎo)您：

01命名空間

如前所述，由于我們將分頁器放置在resources/ezcomp/paginator.xhtml ，因此JSF允許我們使用名稱空間http://java.sun.com/jsf/composite/ezcomp來引用它。因此，稍后（如04所示），您可以通過使用ezcomp:paginator來使用新創(chuàng)建的ezcomp:paginator 。

02以自己的形式列出表

讓我們跳到第二部分。第二部分顯示在此customers.xhtml ，我們使用兩種形式。主要是因為我要與表進行交互，所以您不希望它影響或受另一種形式的影響，在本例中為“創(chuàng)建客戶”部分。

讓我們說，假設(shè)我們只對整個customers.xhtml使用一種形式。單擊按鈕進行排序（第06部分）時，可能會觸發(fā)對創(chuàng)建文本框的驗證，例如，客戶名稱不能為空。我們不想要那個。

由于第03節(jié)中概述的原因，我們還需要給此表格起一個名字。

03重新呈現(xiàn)其他表格

這里的意圖是每當添加新客戶時便能夠刷新表。注意，命名容器（相對于02節(jié)）是第二個h:form 。因此，由于“創(chuàng)建客戶”和表位于不同的命名容器中，因此讓我們僅刷新整個第二個表單即可，這是通過使用正確的“搜索表達式”完成的。首先使用“：”，這意味著JSF將從文檔的根目錄搜索樹（BalusC，2011b）。

04使用我們新創(chuàng)建的復(fù)合組件

這就是使用我們新創(chuàng)建的paginator組件的簡單方法，即通過將適當?shù)膮?shù)傳遞給它（此后）。

另請參閱paginator.xhtml及其說明。

05實際數(shù)據(jù)表

這是實際的數(shù)據(jù)表。如前所述，盡管我們可以創(chuàng)建通用分頁器，但我認為創(chuàng)建通用表渲染將非常困難。因此，在這種情況下，我只想向您展示確定要渲染的列的情況。

需要注意的一件事是，我們調(diào)用listCustomers.data為數(shù)據(jù)表提供javax.faces.DataModel 。基于頁面，大小，排序等，此“數(shù)據(jù)”應(yīng)該是正確的數(shù)據(jù)。如果您仍然不明白，請不要擔心。在下一節(jié)中，它將變得更加清晰。

06排序

根據(jù)以上要求，我們需要實現(xiàn)排序。這是不言自明的，使用f:ajax與前面提到的原因相同。

創(chuàng)建類以支持分頁

好的，我們已經(jīng)使用paginator.xhtml創(chuàng)建了“合同/需求”，然后在customers.xhtml上使用了它。我們現(xiàn)在需要的是實現(xiàn)一個支持該功能的類。

我要做的是遍歷customers.xhtml和paginator.xhtml 。您也可以這樣做，以便您可以輕松理解下面列出的每個要點：

首先，查看customers.xhtml ，該類稱為“ listCustomers”。由于我們正在使用CDI，因此需要使用@Named將bean暴露給JSF環(huán)境。我們可以創(chuàng)建ListCustomers.java ，或在@Named批注中填充value 。
過去，我將@ViewScoped用于此bean。但是，由于我們將JSF的“無狀態(tài)”功能與f:view transient="true" ，因此我們無法再使用@ViewScoped 。這些bean與JSF框架所管理的視圖相關(guān)。但是有了這種無狀態(tài)功能，視圖總是會被重新創(chuàng)建，而這個范圍內(nèi)的bean也會被重新創(chuàng)建（Busscher 2013）。因此，最好使用的范圍是@RequestScoped 。
它需要具有返回javax.faces.DataModel<T> getData() 。這應(yīng)該返回要顯示的Customer列表。
它需要支持public void sort(final String sortField)以支持標頭排序。
String getSortField() ， boolean isAscending() String getSortField() ， int getPage()以及它們相應(yīng)的int getPage()器/設(shè)置器的訪問器。這些是必需的，與我們的隱藏輸入有關(guān)。
rowsPerPage訪問器/ rowsPerPage器，以支持我們的每頁行數(shù)選擇。
它需要支持public void updateRowsPerPage(AjaxBehaviorEvent event) ，以便我們可以基于用戶的每頁行數(shù)選擇來更新列表。
它需要支持public void navigatePage(final boolean forward) 。
記錄recordCount

無論如何，您現(xiàn)在應(yīng)該可以實現(xiàn)該類。

但是，我實現(xiàn)它的方法是將其分為兩部分。如果您考慮一下，讓我們說以后您的應(yīng)用程序中有多個列表，例如訂單列表，人員列表，發(fā)票等。它們將以相同的方式實現(xiàn)。我認為創(chuàng)建一個基類，然后再用實際實體擴展它是一個更好的主意。

首先是基層。

DataListingSupport.java

package id.co.dwuysan.util;import java.io.Serializable; import javax.faces.event.AjaxBehaviorEvent; import javax.faces.model.DataModel;public abstract class DataListingSupport<T extends Serializable> implements Serializable {private int recordCount = 0;private int totalPages = 0;private DataModel<T> data;private int page = 1;private Integer rowsPerPage = null;private boolean ascending = true;private String sortField;public void navigatePage(final boolean forward) {setPage((forward) ? ++page : --page);refresh();}public void sort(final String sortField) {setSortField(sortField);setAscending(getSortField().equals(sortField) ? !isAscending() : true);refresh();}public void updateRowsPerPage(final AjaxBehaviorEvent event) {setPage(1); // page must reset to the first onerefresh();}public void refresh() {// hook to populate count and datapopulateCountAndData();// compute total pagessetTotalPages(countTotalPages(getRecordCount(), getRowsPerPage()));}/*** The concreate implementation of this class must perform data retrieval* based on the current information available (accessible via methods such* as {@link #getSortField()}, {@link #isAscending()}, etc.* <p>* The implementation is responsible in populating the values for {@link #setRecordCount(int)}* and {@link #setData(javax.faces.model.DataModel)}*/protected abstract void populateCountAndData();/************************************************************** HELPER(S) */private static int countTotalPages(int totalRecord, int rowsPerPage) {int pageCounter = 0;for (int pageCountTracker = 0; pageCountTracker < totalRecord; ++pageCounter) {pageCountTracker += rowsPerPage;}return pageCounter;}/************************************************* ACCESSORS AND MUTATORS */public int getPage() {return page;}public void setPage(int page) {this.page = page;}public boolean isAscending() {return ascending;}public void setAscending(boolean ascending) {this.ascending = ascending;}public Integer getRowsPerPage() {return rowsPerPage;}public void setRowsPerPage(Integer rowsPerPage) {this.rowsPerPage = rowsPerPage;}public DataModel<T> getData() {return data;}public void setData(DataModel<T> data) {this.data = data;}public String getSortField() {return sortField;}public void setSortField(String sortField) {this.sortField = sortField;}public int getRecordCount() {return recordCount;}public void setRecordCount(int recordCount) {this.recordCount = recordCount;}public int getTotalPages() {return totalPages;}public void setTotalPages(int totalPages) {this.totalPages = totalPages;} }

接下來是我們?nèi)绾螖U展該類以創(chuàng)建支持bean以支持Customer列表。

DataListingSupport.java

package id.co.dwuysan.customer;import id.co.dwuysan.entity.Customer; import id.co.dwuysan.service.CustomerService; import id.co.dwuysan.util.DataListingSupport; import javax.enterprise.context.RequestScoped; import javax.faces.model.ListDataModel; import javax.inject.Inject; import javax.inject.Named;@RequestScoped @Named public class ListCustomers extends DataListingSupport<Customer> {@Injectprivate CustomerService customerService;public ListCustomers() {setSortField("name");setRowsPerPage(10);}@Overrideprotected void populateCountAndData() {/** This is where we call an EJB (or whatever service layer you have)* to perform data retrieval.** You need to make sure to retrieve the result (paginated, sorted), and* also the total number of records.*/setRecordCount(result.getCount());setData(new ListDataModel<>(result.getResult()));} }

因此，您看到，使用這種方法，如果我需要另一種清單，即訂單清單，我們可以輕松擴展DataListingSupport<> 。

結(jié)果

在向您展示全部結(jié)果之前，我們可能要添加的一件事是在頁面顯示時從數(shù)據(jù)庫加載所有當前客戶的操作。 JSF 2.2添加了一項稱為“查看操作”的功能，該功能使此操作非常簡單（McGinn 2011）。

所有你需要做的，是添加這個f:viewAction后f:view如下：

customer.xhtml

注意，我們只是簡單地調(diào)用DataListingSupport<>#refresh() 。 viewAction實際上會分析String返回以執(zhí)行隱式導(dǎo)航。在這種情況下，我們的refresh()方法實際上返回void ，因此不執(zhí)行導(dǎo)航（McGinn 2011）。

結(jié)果應(yīng)該是這樣的：

我從納斯達克100指數(shù)中挑選了客戶名單。

因此，現(xiàn)在您有了一個可滾動，可延遲加載的AJAX數(shù)據(jù)表。

參考文獻

BalusC，2011a， “ netbeans中的JSF 2應(yīng)用程序中默認的Managed Bean Scope是什么？” ，堆棧溢出，2013年11月6日訪問
BalusC，2011b， “如何在JSF ajax中引用組件？在 2013年11月11日訪問的堆棧溢出中，在視圖中找不到標識符為“ foo”的組件
Busscher，R，2013年， “解釋了JSF 2.2無狀態(tài)視圖” ，JSF Corner，2013年11月12日訪問
Geary D，Horstmann，C，2010年，“ Core JavaServer Faces（第3版）”，第3版，美國加利福尼亞州Prentice Hall
Lubke，R，2008， “ JSF 2.0新功能預(yù)覽系列（第4部分）資源重定位” ，Oracle.com，2013年10月7日訪問
McGinn，T，2011年， “新的JavaServer Faces 2.2功能：viewAction組件” ，Oracle.com，2013年11月17日訪問
Oracle，2013年， “復(fù)合組件” ，Oracle.com，2013年11月7日訪問
Riem，男，2013年， “ JSF技巧＃26 – JSF變得無狀態(tài)” ，Java.net，2013年11月9日訪問

參考：使用JSF 2.2功能從dwuysan博客博客中的JCG合作伙伴 Deny Wuysan 開發(fā)了ajax，可滾動，延遲加載的數(shù)據(jù)表。

翻譯自: https://www.javacodegeeks.com/2013/11/using-jsf-2-2-features-to-develop-ajax-scrollable-lazy-loading-data-table.html

總結(jié)

以上是生活随笔為你收集整理的使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：理财业绩基准怎么算收益？
下一篇：将社交登录添加到Spring MVC W

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

javascript

使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表

這個概念

使用模板

template.xhtml

header.xhtml，footer.xhtml，menu.xhtml

customer.xhtml

添加設(shè)施以創(chuàng)建客戶

CustomerData.java

CustomerData.java

customer.xhtml

定義“合同”

創(chuàng)建復(fù)合組件

paginator.xhtml

使用復(fù)合組件

customer.xhtml

創(chuàng)建類以支持分頁

DataListingSupport.java

DataListingSupport.java

結(jié)果

customer.xhtml

參考文獻

總結(jié)