T
traysa
Gast
hallo zusammen,
ich schlage mich grad mit richfaces herum und versuche eine tabelle zu bauen bei der man u.a. eine zeile durch mausklick auswählen kann und sich durch einen weiteren klick auf einen ajax-commandButton den datensatz der hinter der ausgewählten zeile steckt mit einem modalpanel anzeigen lassen kann.
die arbeit mit rich:scrollableDataTable hab ich bereits aufgegeben, da ich damit einige probleme hatte. deshalb hab ich mir selbst einen scroller um mein datatable gebaut.
Tabellen Header:
Scoller und Tabelleninhalt:
Ajax CommanButtons:
In my BackingBean:
Modal Panel (show detail):
ich schlage mich grad mit richfaces herum und versuche eine tabelle zu bauen bei der man u.a. eine zeile durch mausklick auswählen kann und sich durch einen weiteren klick auf einen ajax-commandButton den datensatz der hinter der ausgewählten zeile steckt mit einem modalpanel anzeigen lassen kann.
die arbeit mit rich:scrollableDataTable hab ich bereits aufgegeben, da ich damit einige probleme hatte. deshalb hab ich mir selbst einen scroller um mein datatable gebaut.
Code:
<h:panelGroup>
Code:
<div class="header-border">
<rich:dataTable id="Headers" styleClass="headerTable">
<rich:column id="DateHeader" headerClass="table-dateCol">
<f:facet name="header">
<h:outputText value="Datum"/>
</f:facet>
</rich:column>
<rich:column id="DescriptionHeader">
<f:facet name="header">
<h:outputText value="Beschreibung" />
</f:facet>
</rich:column>
</rich:dataTable>
</div>
Code:
<div class="scroller">
<rich:dataTable id="Table" styleClass="tableContent"
rowClasses="#{myBean.rowClasses}" columnClasses="table-dateCol,none"
binding="#{myBean.table}"
var="element"
value="#{myBean.resultList}">
<a4j:support event="onRowClick" action="#{myBean.takeSelection}"/>
<rich:column id="Date" sortBy="#{element.date}" sortOrder="DESCENDING">
<h:outputText value="#{element.date}"/>
</rich:column>
<rich:column id="Description">
<h:outputText value="#{element.description}" />
</rich:column>
</rich:dataTable >
</div>
</h:panelGroup>
Code:
<rich:spacer height="10px"/>
<h:panelGroup>
<h:panelGrid columns="4" style="float:right;" >
<h:column>
<a4j:commandButton value="Show Detail" styleClass="tableButtons" reRender="detailTable"
oncomplete="javascript:Richfaces.showModalPanel('detailPanel');"/>
</h:column>
<h:column>
<a4j:commandButton value="Edit" styleClass="tableButtons" reRender="editTable"
oncomplete="javascript:Richfaces.showModalPanel('editPanel');"/>
</h:column>
<h:column>
<a4j:commandButton value="New" styleClass="tableButtons" reRender="newTable"
action="#{myBean.emptyData}"
oncomplete="javascript:Richfaces.showModalPanel('newPanel');"/>
</h:column>
<h:column>
<a4j:commandButton value="Delete" styleClass="tableButtons"
reRender="table" action="#{myBean.deleteData}" />
</h:column>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
In my BackingBean:
Code:
//Colors the selection and saves it
public String takeSelection(){
if (table.isRowAvailable()){
this.setSelection((Data)table.getRowData());
Integer row = table.getRowIndex();
rowClasses = "";
for (int i = 0; i < table.getRowCount(); i++) {
if (i == row){
rowClasses = rowClasses + "selectedRow,";
} else {
rowClasses = rowClasses + "none,";
}
}
} else System.out.println("No row available!!");
return null;
}
Modal Panel (show detail):
Code:
<rich:modalPanel id="detailPanel" autosized="true" >
<f:facet name="header">
<h:outputText value="Selected Rows"></h:outputText>
</f:facet>
<f:facet name="controls">
<h:graphicImage id="hidelink" value="/resources/images/exit.gif" styleClass="exitButton"
onclick="javascript:Richfaces.hideModalPanel('detailPanel')"/>
</f:facet>
<h:form>
<h:panelGroup layout="block" style=" width:300px;height:100px;overflow:auto;">
<rich:dataTable
id="detailTable"
var="selectedItem"
value="#{myBean.selection}">
<rich:column id="date">
<f:facet name="header">
<h:outputText value="Datum" />
</f:facet>
<h:outputText value="#{selectedItem.date}" />
</rich:column>
<rich:column id="description">
<f:facet name="header">
<h:outputText value="Beschreibung" />
</f:facet>
<h:outputText value="#{selectedItem.description}" />
</rich:column>
</rich:dataTable>
</h:panelGroup>
</h:form>
</rich:modalPanel>