如何在ajax方法中获取单击的项目?

假设这个页面代码
<h:form prependId="false" id="form">

    <h:selectManyCheckBox id="checkBoxList" value="#{backedBean.lstIdSelectedItems}" layout="pageDirection">
        <f:selectItems value="#{backedBean.lstAvailableItems}" var="item" itemLabel="#{item.label}" itemValue="#{item.value}" />
        <f:ajax listener="#{backedBean.itemClicked}" />
    </h:selectManyCheckBox>

</h:form>

和会话管理bean的代码

public class BackedBean implements Serializable {
   private List<SelectItem> lstAvailableItems;
   private List<Long> lstIdSelectedItems;

public BackedBean() {
    lstAvailableItems = new ArrayList<SelectItem>();
    lstIdSelectedItems = new ArrayList<Long>();
}

@PostConstruct
private void postConstruct(){
    for (int i = 0; i < 10; i++) {
        SelectItem item = new SelectItem(new Long(i),"CHKID " + i);
        lstAvailableItems.add(item);
    }
}

public void itemClicked(AjaxBehaviorEvent ae){
    HtmlSelectManyCheckBox uiCmp = (HtmlSelectManyCheckBox)ae.getSource();

    // (1) Here I would like to get the ID of the item that has been clicked.

}

在(1)中,我想获得用户点击的元素的ID.我可以在lstIdSelectedItems数组列表中看到用户选择的所有元素的ID,但是如何获取用户点击的元素的ID?

我曾尝试在selectManyCheckBox中使用f:attribute标记,但在支持的bean中调用ajax listener方法时,该属性不在组件映射中.我用过这个,但不起作用:

<h:selectManyCheckBox id="checkBoxList" value="#{backedBean.lstIdSelectedItems}" layout="pageDirection">
    <f:selectItems value="#{backedBean.lstAvailableItems}" var="item" itemLabel="#{item.label}" itemValue="#{item.value}">
        <f:attribute name="clicked" value="#{item.value}" />
    </f:selectItems>
    <f:ajax listener="#{backedBean.itemClicked}" />
</h:selectManyCheckBox>

有任何想法吗?

问候.

因此,您对实际价值变化感兴趣,而不仅仅是新价值.引入一个valueChangeListener,它将旧值与新值进行比较,并准备一些ajax监听器方法可以拦截属性.

例如.

<h:selectManyCheckBox value="#{bean.selectedItems}" valueChangeListener="#{bean.selectedItemsChanged}" converter="javax.faces.Long">
    <f:selectItems value="#{bean.availableItems}" />
    <f:ajax listener="#{bean.itemSelected}" />
</h:selectManyCheckBox>

private Map<String,Long> availableItems; // +getter
private List<Long> selectedItems; // +getter+setter
private Long selectedItem;
private boolean selectedItemRemoved;

@PostConstruct
public void init() {
    availableItems = new LinkedHashMap<String,Long>();

    for (long i = 0; i < 10; i++) {
        availableItems.put("CHKID " + i,i);
    }
}

public void selectedItemsChanged(ValueChangeEvent event) {
    List<Long> oldValue = (List<Long>) event.getOldValue();
    List<Long> newValue = (List<Long>) event.getNewValue();

    if (oldValue == null) {
        oldValue = Collections.emptyList();
    }

    if (oldValue.size() > newValue.size()) {
        oldValue = new ArrayList<Long>(oldValue);
        oldValue.removeAll(newValue);
        selectedItem = oldValue.iterator().next();
        selectedItemRemoved = true;
    }
    else {
        newValue = new ArrayList<Long>(newValue);
        newValue.removeAll(oldValue);
        selectedItem = newValue.iterator().next();
        selectedItemRemoved = false;
    }
}

public void itemSelected(AjaxBehaviorEvent event) {
    System.out.println("Selected item: " + selectedItem);
    System.out.println("Selected item removed? " + selectedItemRemoved);
}

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...