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

Question

我需要显示 <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> 个带有图像的项目？

Answer 1

使用 <p:selectManyCheckbox>. Your best bet is to just use a bunch of <p:selectBooleanCheckbox> 组件是不可能的，将模型更改为 Map<Entity, Boolean> 而不是 List<Entity>。您可以使用 <ui:repeat>.

遍历它

例如（正常的 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());
    }
}

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

How to display items with image in p:selectManyCheckbox

image

jsf

primefaces

selectmanycheckbox