Add check box into the datatable

1. <t:dataTable 
2.                   id="checkboxTable" 
3.                   value="#{backingBean.dataModel}" 
4.                   var="row_data  
5.                   columnClasses="borderless; table-layout: fixed;"> 
6.                   <t:column width="20px"> 
7.                       <f:facet name="header" > 
8.                           <h:outputText value="Select"/> 
9.                       </f:facet> 
10.                       <h:selectBooleanCheckbox value="#{row_data.selected}" /> 
11.                   </t:column> 
12.                   <t:column> 
13.                   <t:outputText value="#{row_data.value}"/> 
14.                   </t:column> 
15.               </t:dataTable>  

		<t:dataTable
                    id="checkboxTable"
                    value="#{backingBean.dataModel}"
                    var="row_data
                    columnClasses="borderless; table-layout: fixed;">
                    <t:column width="20px">
                        <f:facet name="header" >
                            <h:outputText value="Select"/>
                        </f:facet>
                        <h:selectBooleanCheckbox value="#{row_data.selected}" />
                    </t:column>
                    <t:column>
                    <t:outputText value="#{row_data.value}"/>
                    </t:column>
                </t:dataTable> 

the code of bean:

Java代码

1. public class TableData {  
2.     private boolean selected = false;  
3.     private String value;  
4.  
5.     public boolean getSelected() {  
6.         return selected;  
7.     }  
8.  
9.     public void setSelected(boolean selected) {  
10.         this.selected = selected;  
11.     }  
12.  
13.     public String getValue() {  
14.         return value;  
15.     }  
16.  
17.     public void setValue(String value) {  
18.         this.value = value;  
19.     }  
20.  
21. } 

public class TableData {
	private boolean selected = false;
	private String value;

	public boolean getSelected() {
		return selected;
	}

	public void setSelected(boolean selected) {
		this.selected = selected;
	}

	public String getValue() {
		return value;
	}

	public void setValue(String value) {
		this.value = value;
	}

}

 

Add radio button into the datatable

Javascript of select one radio button, actually the radio button is not in one group, user only can select one radio is controlled by the javascript.

Js代码

1. function selectOne(form, button) {  
2. turnOffRadioForForm(form);  
3. button.checked = true;}  
4.  
5. function turnOffRadioForForm(form) {  
6. for (var i = 0; i < form.elements.length; i++) {  
7. form.elements[i].checked = false;}  
8. } 

function selectOne(form, button) {
turnOffRadioForForm(form);
button.checked = true;}

function turnOffRadioForForm(form) {
for (var i = 0; i < form.elements.length; i++) {
form.elements[i].checked = false;}
}

JSF Code of h:dataTable Table on JSP Page

We will use valueChangeListener for this, as when user check the radio button we will get the binded value of bean. It is one column. NOTE: Please remove all spaces after : sign. In f and h tags.

Html代码

1. <h:column> 
2.     <f:facet name="header"> 
3.         <f:verbatim>Select</f:verbatim> 
4.     </f:facet> 
5.     <h:selectOneRadio id="selectRadio" value="#{depositMoneyPageBean.creditCardDataBean.cardId}" 
6.         valueChangeListener="#{depositMoneyPageBean.handleRadioValueChange}" 
7.         onclick="selectOne(this.form , this)" > 
8.         <f:selectItem itemValue="#{creditCardData.cardId}" itemLabel=" " /> 
9.     </h:selectOneRadio> 
10. </h:column> 

<h:column>
	<f:facet name="header">
		<f:verbatim>Select</f:verbatim>
	</f:facet>
	<h:selectOneRadio id="selectRadio" value="#{depositMoneyPageBean.creditCardDataBean.cardId}"
		valueChangeListener="#{depositMoneyPageBean.handleRadioValueChange}"
		οnclick="selectOne(this.form , this)" >
		<f:selectItem itemValue="#{creditCardData.cardId}" itemLabel=" " />
	</h:selectOneRadio>
</h:column>

Backing Bean code

This is the backing bean code, and here is the valueChangeListener method:

Java代码

1. public void handleRadioValueChange(ValueChangeEvent valueChangedEvent){  
2. try {  
3. // here we got the selected row of dataTable  
4. this.creditCardDataBean = (CreditCardDataBean)getTable1().getRowData();  
5. selectedCardId = creditCardDataBean.getCardId();  
6. }catch (Exception e){  
7. e.printStackTrace();  
8. }  
9. }  
10. public HtmlDataTable getTable1(){  
11. if (table1 == null) {  
12. table1 = (HtmlDataTable) findComponentInRoot(&quot;table1&quot;);  
13. }  
14. return table1;  
15. }  
16.  
17. public static UIComponent findComponentInRoot(String id) {  
18. UIComponent ret = null;  
19. FacesContext context = FacesContext.getCurrentInstance();  
20. if (context != null) {  
21. UIComponent root = context.getViewRoot();  
22. ret = findComponent(root, id);  
23. }  
24. return ret;  
25. }  
26.  
27. public static UIComponent findComponent(UIComponent base, String id) {  
28.  
29. // Is the &quot;base&quot; component itself the match we are looking for?  
30. if (id.equals(base.getId())) {  
31. return base;  
32. }  
33.  
34. // Search through our facets and children  
35. UIComponent kid = null;  
36. UIComponent result = null;  
37. Iterator kids = base.getFacetsAndChildren();  
38. while (kids.hasNext() &amp;amp;&amp;amp; (result == null)) {  
39. kid = (UIComponent) kids.next();  
40. if (id.equals(kid.getId())) {  
41. result = kid;  
42. break;  
43. }  
44. result = findComponent(kid, id);  
45. if (result != null) {  
46. break;  
47. }  
48. }  
49. return result;  
50. }