JSF：在h：dataTable中垂直显示h：selectManyCheckBox

Question

I have a simply facelet which display a list of products in tabular format. In the last column of each row, there is a checkbox used to mark the product for deletion. Until now i have to put a selectBooleanCheckBox on each row and have a "mark for deletion" property in the Product entity but i think it's ugly because i have some presentation stuff in my model bean.

Is there anyway to have ah:selectManyCheckBox which has its f:selectItem distribute on each row of the dataTable ?

Thank you

Answer 1

The t:selectManyCheckbox layout="spread" is an excellent suggestion.

As an alternative, you can also just bind the h:selectBooleanCheckbox component to a Map<Long, Boolean> property where Long represents the entity ID (or whatever identifier which you can use to identify the row) and Boolean represents the checked state.

Eg

public class Bean {
    private List<Entity> entities;
    private Map<Long, Boolean> checked = new HashMap<Long, Boolean>();

    public void submit() {
        for (Entity entity : entities) {
            if (checked.get(entity.getId())) {
                // Entity is checked. Do your thing here.
            }
        }
    }

    // ...
}

with

<h:dataTable value="#{bean.entities}" var="entity">
    <h:column>
        <h:selectBooleanCheckbox value="#{bean.checked[entity.id]}" />
    </h:column>
    ...
</h:dataTable>
<h:commandButton value="submit" action="#{bean.submit}" />

The Map<Long, Boolean> will be automagically filled with the ID of all entities as map keys and the checkbox value is set as map value associated with the entity ID as key.

See also:

• Using datatables - Select multiple rows

Answer 2

你可以使用MyFaces Tomahawk的<t:selectManyCheckbox> with layout="spread"

Answer 3

In my application, i have used below set of code to get multiple checkbox list to be displayed vertically with scrollbar:

<style type="text/css">
#productCategoryId label {
  float: inherit;
  font-size: 10px!important;
  font-weight: normal;
}
#productCategoryId table.formTable th, table.formTable td {
  padding: 0px 0px 0 0;
}
</style>

<div style="width:200px;height: 280px;overflow-y:scroll;overflow-x:hidden;border:1px solid #999;" max-height=280px>
             <h:selectManyCheckbox  id="productCategoryId" layout="pageDirection" style="width:200px" styleClass="changeId">
                  <f:selectItem itemValue="-1000" itemLabel="ALL" />
                  <f:selectItems value="#{lookup.list['RSM_LOOKUP']['PRODUCT_CATEGORY']}"/>
                </h:selectManyCheckbox >
            </div>

Answer 4

The best way to use selectManyCheckbox and dataTable is...

=== Page.xhtml ===

<ice:selectManyCheckbox id="idSelectManyCheckbox" layout="spread"
   value="#{MyBean.selectedsValuesCheckbox}" >
   <f:selectItems value="#{MyBean.selectItemsCheck}"/>
</ice:selectManyCheckbox>

<ice:dataTable varStatus="rowVar"
   value="#{MyBean.listOfMyObjects}" var="anyNameVar">

   <ice:column>
      <ice:checkbox for="idSelectManyCheckbox" index="#{rowVar.index}" />
   </ice:column>
   <ice:column>
      <ice:outputText value="#{anyNameVar.property1}" />
   </ice:column>

   <!-- ... more columns .. -->
</ice:dataTable>

=== MyBean.java ===

private List<MyObject> listOfMyObjects = new ArrayList<MyObject>(3);
private List<String> selectedsValuesCheckbox = new ArrayList<String>(2);
private SelectItem[] selectItemsCheck = new SelectItem[3];

private handleSelectItemsCheck(){
   int idx = 0;
   selectedsValuesCheckbox.add("1");
   selectedsValuesCheckbox.add("3");
   for (MyObject myObject : listOfMyObjects) {
      selectItemsCheck[idx++] = 
    new SelectItem(myObject.property1, myObject.property2); // value and label
   }
}

// Gets and sets

================================================================

*you must use layout="spread" in that situation.
*in the table the checkboxs 1 and 3 will be selected. because "selectedsValuesCheckbox"