如何在p:selectManyCheckbox中显示带有图像的项目

时间:2015-01-06 02:27:45

标签: image jsf primefaces selectmanycheckbox

我需要在图片上显示<p:selectManyCheckbox>个项目。我试图在<p:selectOneRadio>中显示图像。它工作正常。我是以编程方式在UI上添加组件。这是我的代码。

answerRadio.setLayout("custom"); //answerRadio is SelectOneRadio
customPnl = (PanelGrid) app.createComponent(PanelGrid.COMPONENT_TYPE);
            customPnl.setId("pnl"+qstnCnt);
            customPnl.setColumns(3);
radioBtn = (RadioButton) app.createComponent(RadioButton.COMPONENT_TYPE);
                        radioBtn.setId("opt"+qstnAnsIndx);
                        radioBtn.setFor("ID of answerRadio");
                        radioBtn.setItemIndex(ansIndx);
                        customPnl.getChildren().add(radioBtn);

outPnl.getChildren().add(answerRadio); //outPnl is OutputPanel that include answerRadio
outPnl.getChildren().add(customPnl);

<p:selectOneRadio>带有图片。

我想以同样的方式使用<p:selectManyCheckbox>。但PrimeFaces只有<p:radioButton>的自定义布局,而不是<p:checkbox>这样的。我怎么能实现呢?如何显示带有图像的<p:selectManyCheckbox>项?

1 个答案:

答案 0 :(得分:3)

<p:selectManyCheckbox>无法做到这一点。您最好的选择是仅使用一堆<p:selectBooleanCheckbox>组件,并将模型更改为Map<Entity, Boolean>而不是List<Entity>。您可以使用<ui:repeat>循环播放它。

E.g。 (正常的XHTML变体;我不打算提倡Java createComponent()等价物):

<ui:repeat value="#{bean.entities}" var="entity">
    <p:selectBooleanCheckbox value="#{bean.selection[entity]}" />
    ... (you can put here image, label, anything)
</ui:repeat>

private List<Entity> entites; 
private Map<Entity, Boolean> selection;

@PostConstruct
public void init() {
    entities = service.list();
    selection = new HashMap<>(); // No need to prefill it!
}

要检查选择了哪些,请在操作方法中循环遍历地图:

List<Entity> selectedEntities = new ArrayList<>();

for (Entry<Entity, Boolean> entry : selection.entrySet()) {
    if (entry.getValue()) {
        selectedEntities.add(entry.getKey());
    }
}