こんにちは、水平スクロールバーと垂直スクロールバーの両方を備えた編集可能なテーブルを実装したいので、リッチフェイスで拡張テーブルを選択し、このテーブルのデータを編集したいので、インプレース入力とインプレース選択を選択しました。 30行未満です。それ以上の行がある場合、600行と言います.....ページのレンダリングが非常に遅くなります
インプレース選択なしで表示しようとしただけでとてもうまく機能するので、各行に6つのインプレース選択があり、600 * 6 = 3600選択ドロップダウンをロードする必要があるため遅すぎると考えた理由は次のとおりですドロップダウンごとに、モーダルクラスに移動して、各ドロップダウンの選択リストを取得します。
これらの6つのドロップダウンは、これらの600行の各行で繰り返されます....パフォーマンスを改善してこのソリューションを使用する方法はありますか、またはこれに適したソリューションはありますか?
ドロップ ダウン オプションをリッチ フェイス クライアント側の 1 つの変数に保存し、同じページで再利用する方法はありますか?
<!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:t="http://myfaces.apache.org/tomahawk"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:a4j="http://richfaces.org/a4j"
>
<ui:composition template="/WEB-INF/layout/baseLayoutJs.xhtml">
<rich:messages layout="list" showDetail="true" showSummary="true"
style="color:darkred">
<f:facet name="errorMarker">
<h:graphicImage value="/images/error.gif" />
</f:facet>
<f:facet name="infoMarker">
<h:graphicImage value="/images/passed.gif" />
</f:facet>
</rich:messages>
<ui:define name="content">
<h:form>
<rich:panel style="width:800px">
<f:facet name="header">
<h:panelGrid id="grid0" columns="4" style="width:800px;">
<h:outputLabel for="s1212" styleClass="formLabelswidth25"
value="Scheme Editor Home" />
</h:panelGrid>
</f:facet>
<rich:messages layout="list" rendered="true" showDetail="true"
showSummary="true" passedLabel="Trying to Save." style="color:red">
<f:facet name="errorMarker">
<h:graphicImage value="/images/error.gif" />
</f:facet>
<f:facet name="passedMarker">
<h:graphicImage value="/images/passed.gif" />
</f:facet>
</rich:messages>
<h:panelGrid columns="8" bgcolor="#BED6F8" style="height:30px;" width="780">
<h:commandButton action="#{schemeWebEditorHomeHandler.saveScheme}" value="Save" style="height:20px;width:60px;"/>
<h:commandButton action="#{schemeWebEditorHomeHandler.addNewSchemeRow}" value="New Row" style="height:20px;width:10x;"/>
<h:commandButton action="#" value="Clear Row" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Delete Row" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Update Trays" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Search" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Copy" style="height:20px;width:100px;"/>
<h:commandButton action="#" value="Help" style="height:20px;width:100px;"/>
</h:panelGrid>
<t:div style=" height : 10px;"></t:div>
<h:panelGrid id="searchData" style="width=780px;">
<rich:extendedDataTable id="data" var="list"
preserveDataModel="false" preserveSort="true" bgcolor="#BED6F8" style="height:300px; width:780px;"
frozenColumns="3"
selection="#{schemeWebEditorHomeHandler.selection}" selectionMode="multiple"
value="#{schemeWebEditorHomeHandler.sortSchemeRowList}" width="780" rowKeyVar="row">
<rich:column align="left" width="130px" >
<f:facet name="header">
<h:panelGroup width="130px" layout="block">
<script type="text/javascript">
//<![CDATA[
function checkAllCheckboxesInTable( inputId, state ){
var commonIdPart = inputId.substr(0, inputId.lastIndexOf(':'));
var tableId = commonIdPart ;
var tableElement = document.getElementById( tableId );
var inputs = tableElement.getElementsByTagName('input');
for (var i = 0; i <= inputs.length; i++){
var input = inputs[i];
if( input.getAttribute('type') == 'checkbox' && state){
input.setAttribute('checked', state);
}else{
input.removeAttribute('checked');
}
}
}
//]]>
</script>
<h:selectBooleanCheckbox id="checkAll" title="#{bundle.CHECK_ALL}" onclick="checkAllCheckboxesInTable( this.id, this.checked );">
<a4j:ajax event="change" reRender="data"/>
</h:selectBooleanCheckbox>
<h:outputText value=" SELECT ALL" styleClass="formLabelswidth29" />
</h:panelGroup>
</f:facet>
<h:selectBooleanCheckbox align="left" id="checkEntry" value="#{list.selected}" disabled="false"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Start Bin" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput layout="block" value="#{list.startBin}"
converterMessage="Start Bin value should be integer. Start Bin at row #{row+1} can't be changed."
id="inplace" required="true"
requiredMessage="Start Bin at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" >
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="End Bin" styleClass="formLabelswidth29"/>
</f:facet>
<rich:inplaceInput layout="block" value="#{list.endBin}"
converterMessage="End Bin value should be integer. End Bin at row #{row+1} can't be changed."
id="inplace2" required="true"
requiredMessage=" End Bin at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" >
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Switch" styleClass="formLabelswidth29"/>
</f:facet>
<rich:inplaceSelect value="#{list.binSwitch}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.binSwitchTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Type" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceSelect value="#{list.binTypeId}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.binTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Qual Level" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceSelect value="#{list.quailificationLevelId}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.sortLevelTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Auto/Mach" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceSelect value="#{list.autoMachinableId}" style="border-style:none;" selectItemClass="SelectItem" >
<f:selectItems value="#{schemeWebEditorHomeHandler.autoMachTypeList}" />
</rich:inplaceSelect>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Zip Range" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput value="#{list.rangeValue}"
converterMessage="Zip Range value should be integer. Zip Range at row #{row+1} can't be changed."
id="inplace3" required="false"
requiredMessage="Zip Range at row #{row+1} wasn't filled. Value can't be changed."
selectOnEdit="true" style="p {display:block};border-style:none;" >
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Line 1" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput layout="block" value="#{list.binLine1}"
converterMessage="Bin Line 1 value should be integer. Bin Line 1 at row #{row+1} can't be changed."
id="inplace4"
requiredMessage="Bin Line 1 at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" minInputWidth="180px" >
<f:validateLength minimum="0" maximum="5" />
</rich:inplaceInput>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bin Line 2" styleClass="formLabelswidth29" />
</f:facet>
<rich:inplaceInput layout="block" value="#{list.binLine2}"
converterMessage="Bin Line 2 value should be integer. Bin Line 2 at row #{row+1} can't be changed."
id="inplace5"
requiredMessage="Bin Line 2 at row #{row+1} wasn't filled. Value can't be changed."
changedHoverClass="hover" viewHoverClass="hover"
viewClass="inplace" changedClass="inplace" style="border-style:none;"
selectOnEdit="true" >
</rich:inplaceInput>
</rich:column>
</rich:extendedDataTable>
</h:panelGrid>
</rich:panel>
<t:saveState value="#{schemeWebEditorHomeHandler.selectedSchemeId}"></t:saveState>
<t:saveState value="#{schemeWebEditorHomeHandler.sortSchemeRowList}"></t:saveState>
<t:saveState value="#{schemeWebEditorHomeHandler.fromAddNewRow}"></t:saveState>
</h:form>
</ui:define>
</ui:composition>
</html>
これが私の豆です
新しいコード
@ManagedBean
@ViewScoped
public class SchemeWebEditorHomeHandler extends BaseHandler implements
Serializable {
private static final long serialVersionUID = -1172151714140365016L;
private static final Log log = LogFactory.getLog(SchemeWebEditorHomeHandler.class);
private List<SortSchemeRow> sortSchemeRowList;
List<SelectItem> binSwitchTypeList;
boolean fromAddNewRow = false;
List<SelectItem> binTypeList;
List<SelectItem> autoMachTypeList;
List<SelectItem> sortLevelTypeList;
List<SelectItem> planetCodeTypeList;
List<SelectItem> subMailTypeList;
List<SelectItem> trayLabelTypeList;
List<SelectItem> msMailTypeList;
List<SelectItem> trayBandingTypeList;
private Collection<Object> selection;
private int selectedSchemeId;
public SchemeWebEditorHomeHandler() throws BaajaException {
binSwitchTypeList = new ArrayList<SelectItem>();
binSwitchTypeList.add(new SelectItem(1, "ON"));
binSwitchTypeList.add(new SelectItem(2, "OF"));
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
// binTypeList fetch
if (this.binTypeList == null || this.binTypeList.size() <= 0) {
Collection machBinTypeList = schemeExpert.getMachBinTypes();
this.binTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = machBinTypeList.iterator(); iterator
.hasNext();) {
MachSchemeBinType machSchemeBinType = (MachSchemeBinType) iterator
.next();
this.binTypeList.add(new SelectItem(machSchemeBinType
.getSchemeBinTypeId(), machSchemeBinType
.getDisplayDescription()));
}
}
if (this.autoMachTypeList == null || this.autoMachTypeList.size() <= 0) {
Collection dbAutoMAchTypeList = schemeExpert
.getAutoMachinableTypes();
this.autoMachTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbAutoMAchTypeList.iterator(); iterator
.hasNext();) {
CoreAutoMachLite coreAutoMachLite = (CoreAutoMachLite) iterator
.next();
this.autoMachTypeList.add(new SelectItem(coreAutoMachLite
.getAutoMachId(), coreAutoMachLite.getDescription()));
}
}
if (this.sortLevelTypeList == null
|| this.sortLevelTypeList.size() <= 0) {
Collection dbSortLevelTypeList = schemeExpert
.getQualificationLevels();
this.sortLevelTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbSortLevelTypeList.iterator(); iterator
.hasNext();) {
CoreSortLevelLite coreSortLevelLite = (CoreSortLevelLite) iterator
.next();
this.sortLevelTypeList.add(new SelectItem(coreSortLevelLite
.getSortLevelId(), coreSortLevelLite.getDescription()));
}
}
planetCodeTypeList = new ArrayList<SelectItem>();
planetCodeTypeList.add(new SelectItem(true, "ON"));
planetCodeTypeList.add(new SelectItem(false, "OF"));
if (this.subMailTypeList == null || this.subMailTypeList.size() <= 0) {
Collection dbSubMailTypeList = schemeExpert.getSubMailingTypes();
this.subMailTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbSubMailTypeList.iterator(); iterator
.hasNext();) {
MachSubmailTypeLite machSubmailTypeLite = (MachSubmailTypeLite) iterator
.next();
this.subMailTypeList.add(new SelectItem(machSubmailTypeLite
.getSubmailTypeId(), machSubmailTypeLite
.getDescription()));
}
}
if (this.msMailTypeList == null || this.msMailTypeList.size() <= 0) {
Collection dbmsMailTypeList = schemeExpert.getMsMailingTypes();
this.msMailTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbmsMailTypeList.iterator(); iterator
.hasNext();) {
MsMailTypeLite msMailTypeLite = (MsMailTypeLite) iterator
.next();
this.msMailTypeList.add(new SelectItem(msMailTypeLite
.getMsMailTypeId(), msMailTypeLite.getDescription()));
}
}
trayBandingTypeList = new ArrayList<SelectItem>();
trayBandingTypeList.add(new SelectItem(true, "ON"));
trayBandingTypeList.add(new SelectItem(false, "OF"));
if (this.trayLabelTypeList == null
|| this.trayLabelTypeList.size() <= 0) {
Collection dbtrayLabelTypeList = schemeExpert
.getTraySubMailingTypes();
this.trayLabelTypeList = new ArrayList<SelectItem>();
for (Iterator iterator = dbtrayLabelTypeList.iterator(); iterator
.hasNext();) {
LogTrayTagTypeLite logTrayTagTypeLite = (LogTrayTagTypeLite) iterator
.next();
this.trayLabelTypeList.add(new SelectItem(logTrayTagTypeLite
.getTrayTagTypeId(), logTrayTagTypeLite
.getDescription()));
}
}
log.info("Constrctor ...........");
}
public String viewScheme() throws BaajaException {
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
HttpServletRequest req = getServletRequest();
int sorterSchemeId = this.selectedSchemeId;
if (req.getParameter("sorterSchemeId") != null
&& req.getParameter("sorterSchemeId").trim().length() > 0) {
sorterSchemeId = Integer.parseInt(req
.getParameter("sorterSchemeId"));
}
log.info("Parameter scheme Id :" + sorterSchemeId);
MachSorterSchemeLite sortScheme = schemeExpert
.getScheme(sorterSchemeId);
this.sortSchemeRowList = (List) SortSchemeUtility
.getSortSchemeRow(sortScheme.getMachSortSchemeGroups());
if (sortSchemeRowList.size() > 0) {
} else {
addErrorMessage("No matching records found for selected criteria");
}
return "view_SchemeWebHome_Screen";
}
public String saveScheme() throws BaajaException {
System.out.println("Hello inside save scheme");
// log.info("listSize5"+this.sortSchemeRowList.size());
// sortSchemeRowList= getSortSchemeRowList();
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
MachSorterSchemeLite sortScheme = schemeExpert
.getScheme(this.selectedSchemeId);
schemeExpert.updateSchemeWithSorterSchemeGroup(sortScheme,
SortSchemeUtility.getSortSchemeGroups(
(Collection) this.sortSchemeRowList, sortScheme));
return viewScheme();
}
public String addNewSchemeRow() throws BaajaException {
log.info("listSize" + this.sortSchemeRowList.size());
SortSchemeRow sr = new SortSchemeRow();
sr.setSubMailingTypeId(1);
sr.setGroupSeparator("");
sr.setBinSwitch(1);
sr.setAutoMachinableId(1);
sr.setBinTypeId(1);
sr.setQuailificationLevelId(1);
this.sortSchemeRowList.add(sr);
// log.info(getSortSchemeRowList().size()+"listSize2"+this.sortSchemeRowList.size());
setFromAddNewRow(true);
return "view_SchemeWebHome_Screen";
}
public List<SortSchemeRow> getSortSchemeRowList() throws BaajaException {
SchemeExpertService schemeExpert = (SchemeExpertService) ServiceLocator
.getServiceWithName(SchemeExpertService.class.getName());
if (this.sortSchemeRowList == null || sortSchemeRowList.size() <= 0) {
if (!this.fromAddNewRow) {
HttpServletRequest req = getServletRequest();
if (req.getParameter("sorterSchemeId") != null) {
this.selectedSchemeId = Integer.parseInt(req
.getParameter("sorterSchemeId"));
}
log.info("Parameter scheme Id :" + this.selectedSchemeId);
MachSorterSchemeLite sortScheme = schemeExpert
.getScheme(this.selectedSchemeId);
sortSchemeRowList = (List) SortSchemeUtility
.getSortSchemeRow(sortScheme.getMachSortSchemeGroups());
}
}
if (sortSchemeRowList.size() > 0) {
return sortSchemeRowList;
} else {
addErrorMessage("No matching records found for selected criteria");
}
return sortSchemeRowList;
}
public void setSortSchemeRowList(List<SortSchemeRow> sortSchemeRowList) {
this.sortSchemeRowList = sortSchemeRowList;
}
public List<SelectItem> getBinSwitchTypeList() {
return binSwitchTypeList;
}
public boolean isFromAddNewRow() {
return fromAddNewRow;
}
public void setFromAddNewRow(boolean fromAddNewRow) {
this.fromAddNewRow = fromAddNewRow;
}
public List<SelectItem> getBinTypeList() throws BaajaException {
return binTypeList;
}
public List<SelectItem> getAutoMachTypeList() throws BaajaException {
log.info("autoMachTypeList ...........");
return autoMachTypeList;
}
public List<SelectItem> getSortLevelTypeList() throws BaajaException {
return sortLevelTypeList;
}
public List<SelectItem> getPlanetCodeTypeList() {
return planetCodeTypeList;
}
public List<SelectItem> getSubMailTypeList() throws BaajaException {
return subMailTypeList;
}
public List<SelectItem> getTrayLabelTypeList() throws BaajaException {
return trayLabelTypeList;
}
public List<SelectItem> getMsMailTypeList() throws BaajaException {
return msMailTypeList;
}
public List<SelectItem> getTrayBandingTypeList() {
return trayBandingTypeList;
}
public Collection<Object> getSelection() {
return selection;
}
public void setSelection(Collection<Object> selection) {
this.selection = selection;
}
public int getSelectedSchemeId() {
return selectedSchemeId;
}
public void setSelectedSchemeId(int selectedSchemeId) {
this.selectedSchemeId = selectedSchemeId;
}
}