在 Primefaces 4 中,pickList 仅具有传输事件,在 Primefaces 5.2 中添加了选择/取消选择事件
从文档:
Ajax 行为事件
PickList 提供 transfer 作为默认且唯一的 ajax 行为事件,该事件在项目从一个列表移动到另一个列表时触发。下面的示例演示了如何使用此事件。
<p:pickList value="#{pickListBean.cities}" var="city"
itemLabel="#{city}" itemValue="#{city}">
<p:ajax event="transfer" listener="#{pickListBean.handleTransfer}" />
</p:pickList>
public class PickListBean {
//DualListModel code
public void handleTransfer(TransferEvent event) {
//event.getItems() : List of items transferred
//event.isAdd() : Is transfer from source to target
//event.isRemove() : Is transfer from target to source
}
}
更新:
要捕获选择/取消选择事件,您可以绑定到复选框单击事件
<p:pickList widgetVar="pick" showCheckbox="true" id="pickList" value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
<f:facet name="sourceCaption">A</f:facet>
<f:facet name="targetCaption">B</f:facet>
</p:pickList>
<script>
$(function(){
PF('pick').checkboxes.each(function(){
$(this).bind("click", function(){
var checked = $(this).find("> span.ui-icon-check").length > 0
if ( checked ){
alert('checked');
} else {
alert('unchecked');
}
});
});
});
</script>
然后,如果您需要调用 bean 侦听器,您可以添加两个 remoteCommands 并调用 click 回调中的函数
<p:pickList widgetVar="pick" showCheckbox="true" id="pickList" value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
<f:facet name="sourceCaption">A</f:facet>
<f:facet name="targetCaption">B</f:facet>
</p:pickList>
<p:remoteCommand name="select" actionListener="#{ctrl.select}" />
<p:remoteCommand name="unselect" actionListener="#{ctrl.onUnselect}" />
<script>
$(function(){
PF('pick').checkboxes.each(function(){
$(this).bind("click", function(){
var checked = $(this).find("> span.ui-icon-check").length > 0
if ( checked ){
select();
} else {
unselect();
}
});
});
});
</script>
显然,侦听器不能接受 SelectEvent/UnselectEvent,但是如果需要,可以使用 remoteCommand 传递参数:
从 JavaScript 将参数传递给 p:remoteCommand