richfaces datatable and subtable
I have the following datable:
<rich:dataTable id="grid1" value="#{monitorForm.custo开发者_运维百科merList}" var="custRow">
<rich:column width="5">
<h:selectBooleanCheckbox value="#{custRow.selected}">
<a:support event="onclick" action="#{monitorForm.selectOrderLines(custRow)}"
reRender="custTable_#{custRow.id}"/>
</h:selectBooleanCheckbox>
</rich:column>
<rich:subTable id="custTable_#{custRow.id}"
var="row" value="#{custRow.orderList}" rendered="#{custRow.show}">
<rich:column width="5">
<h:selectBooleanCheckbox value="#{row.checked}" />
</rich:column>
<rich:column>
<h:outputText value="#{row.name}" />
</rich:column>
</rich:subTable>
</rich:dataTable>
When I click on the checkbox the action #{monitorForm.selectOrderLines(custRow)}
sets the checkboxes for the selected customer and I want only the subtable for that customer to be reRendered.
The above does not work.
The error is [AjaxContext] Target component for id custTable_<id number>
does not exist.
Everything works fine when I use reRender="grid1"
but that can be very slow when there are many rows.
Is it possible to have rich:subTable
with a dynamic id that I can use for reRendering only that subTable?
A workaround I am using now is:
<rich:dataTable id="grid1" value="#{monitorForm.customerList}">
<rich:column width="5">
<h:selectBooleanCheckbox value="" onclick="selectAllPackingLists(this, '#{custRow.id}')"/>
</rich:column>
<rich:subTable var="row" value="#{custRow.orderList}" rendered="#{custRow.show}">
<rich:column>
<input type='hidden' value='#{custRow.id}'/>
</rich:column>
<rich:column width="5">
<h:selectBooleanCheckbox value="#{row.checked}" />
</rich:column>
</rich:subTable>
</rich:dataTable>
javascript function:
function selectAllPackingLists(o, id) {
var elem = jQuery("table[id='monitorFrm:grid1'] > tbody");
var checked = o.checked;
var rows = elem.attr('rows');
jQuery.each(rows, function(index, row) {
// for each row check if the input value in 1st column
// matches the selected customer id
var td = jQuery('td:first', this);
var hiddenFld = jQuery('input:first', td);
if (hiddenFld.val() == id) {
// set the checkbox in the 2nd column to true
var td2 = jQuery('td:nth-child(2)', this);
var cb = jQuery('input:first', td2);
jQuery(cb).attr('checked', checked);
}
});
}
What is great is that setting the checkboxes via JQuery also sets the values in the bean for each corresponding <h:selectBooleanCheckbox value="#{row.checked}" />
I did not know that it would do that.
Could you try setting the subTable id="custTable"
and do reRender="custTable"
and see if that works for you.
精彩评论