Html 带有值和 ID 的 Vaadin ComboBox

Vaadin ComboBox with values and IDs

提问by blueFast

I have defined a ComboBoxwhich allows the user to select a contact from his contact list. The ComboBox is showing the contact name, but that can not really be used to map to the real contact: the contact ID is needed. My problem is that I do not know how to populate the VaadinComboBoxwith linked values and IDs, but only showing the values.

我已经定义了一个ComboBox允许用户从他的联系人列表中选择一个联系人。ComboBox 显示了联系人姓名，但这不能真正用于映射到真正的联系人：需要联系人 ID。我的问题是我不知道如何VaadinComboBox用链接的值和 ID填充，而只显示值。

// Add all organization contacts to the drop-down
for (Contact contact : organizationContacts) {
    contactName = contact.getName();
    contactId   = contact.getId();
    _logger.debug("Adding contactName=" + contactName + " contactId=" + contactId + " to person with id=" + personId);
    contactNameCombo.addItem(contactName);
}

// Add the contact of this person, and select it in the drop-down
contactName = person.getContact().getName();
contactId   = person.getContact().getId();
contactNameCombo.addItem(contactName);
contactNameCombo.setValue(contactName);

As you can see in the code above, I am adding the contactNameto the ComboBox, but I do not know how to add also the contactIdso that I can know later, from the selected entry, which ID must be used to update the database.

正如你可以在上面的代码中看到，我加入contactName到了ComboBox，但我不知道怎么也添加contactId，这样我可以知道后，从选择的条目，其ID必须用于更新数据库。

回答by Charles Anthony

There are several ways to approach this : the most flexible here is to configure the combobox to use a named property as a caption. See Book Of Vaadin on Selecting Itemsfor more details.

有几种方法可以解决这个问题：这里最灵活的是将组合框配置为使用命名属性作为标题。有关 更多详细信息，请参阅 有关选择项目的 Vaadin 之书。

// Set the caption mode to read the caption directly
// from the 'name' property of the item
contactNameCombo.setItemCaptionMode(Select.ITEM_CAPTION_MODE_PROPERTY);
contactNameCombo.setItemCaptionPropertyId("name");

// Add all organization contacts to the drop-down
for (Contact contact : organizationContacts) {
    contactName = contact.getName();
    contactId   = contact.getId();
    _logger.debug("Adding contactName=" + contactName + " contactId=" + contactId + " to person with id=" + personId);

    // Note : the itemId of the item is the contactId
    Item item = contactNameCombo.addItem(contactId);
    item.getProperty("name").setValue(contactName)
}
// Add the contact of this person, and select it in the drop-down
contactName = person.getContact().getName();
contactId   = person.getContact().getId();
Item item = contactNameCombo.addItem(contactId);
item.getProperty("name").setValue(contactName)

// Using the itemId (which = contactId) to select the given contact
contactNameCombo.setValue(contactId);

回答by BlueLettuce16

The solution given by @Charles Anthony didn't work for me either, however on book of vadin webpage (https://vaadin.com/book/-/page/components.selecting.html) I have found the following code:

@Charles Anthony 给出的解决方案对我也不起作用，但是在 vadin 网页（https://vaadin.com/book/-/page/components.selecting.html）上，我找到了以下代码：

// Set item caption for this item explicitly
select.addItem(2); // same as "new Integer(2)"
select.setItemCaption(2, "Deimos");

which works for me.

这对我有用。

回答by Amit S

Vaadin 7:

瓦丁 7：

    statusSelectCombo.setItemCaptionMode(ItemCaptionMode.PROPERTY);
statusSelectCombo.setItemCaptionPropertyId("courseOptionValue");

   IndexedContainer iContainer = new IndexedContainer();
   iContainer.addContainerProperty("courseId", String.class, "");
   iContainer.addContainerProperty("courseOptionValue", String.class, "");
    String addItemId="";
    String addItemCaption="";
for (int i = 0; i < comboItemsArray.length; i++) //String[] comboItemsArray
{
    log.debug("comboItemsArray["+i+"] "+comboItemsArray[i]);
    addItemId= comboItemsArray[i];
    addItemCaption=comboItemsArray[i];
   Item newItem = iContainer.getItem(iContainer.addItem());
   newItem.getItemProperty("courseId").setValue(addItemId);
   newItem.getItemProperty("courseOptionValue").setValue(addItemId);
}
statusSelectCombo.setContainerDataSource(iContainer);

ValueChangeListener listener = new Property.ValueChangeListener()
{
    public void valueChange(ValueChangeEvent event)
    {
    statusSelectCombo.getItemIds();
    Property changedProperty = event.getProperty();
    Object selectedStatus = (Object) statusSelectCombo.getValue(); //it is get Value but gives object ID as an Object
    Item rowItem = statusSelectCombo.getItem(selectedStatus);
    final String selectedCourseId = (String) rowItem.getItemProperty("courseId").getValue();        

    }
};

回答by nexus

Charles Anthony is absolutely right.

查尔斯安东尼是绝对正确的。

You can also take the advantage of a Container like BeanContainer or BeanItemContainer for example (more information here) to add your contact object to your ComboBox. You'll need to fill up your container and add it with

例如，您还可以利用 BeanContainer 或 BeanItemContainer 之类的容器（此处提供更多信息）将您的联系人对象添加到 ComboBox。你需要填满你的容器并添加

contactNameCombo.setContainerDataSource(YOUR_CONTAINER);

to your ComboBox.

到您的组合框。