使用JSF <h:selectManyListbox>做的一个列表框

本文介绍了一个JSF页面中的多选列表框组件及其与AJAX事件的结合使用方式。通过具体代码示例展示了如何设置列表框的属性、绑定数据源以及触发AJAX事件来实现动态更新。
页面如下:


<div class="float-left" style="position:relative;">
<h:selectManyListbox value="#{page.counterFirstNames}" size="10" immediate="true" id="firstName">
<f:ajax event="change" immediate="false" listener="#{page.getSecondName}"/>
<f:selectItems value="#{page.counterFirstNamesList}" />
</h:selectManyListbox>
</div>

其中<f:selectItems value="#{page.counterFirstNamesList}" />为展示在列表框里面的LIST,counterFirstNamesList为List<SelectItem>并且存放的是SelectItem,构造方法为SelectItem(Object,String),如果每次只取一个值Object就放成String。注意f:selectItem 和 f:selectItems区别,少一个S就是报转型错误的。

<h:selectManyListbox value="#{page.counterFirstNames}"这个VALUE存放的是你点击的值,若多选考虑使用LIST或数组。(效果见附件)

使用f:ajax出发change事件,每次点击一个值,都会得到点击的值,LOG如下

12:56:06.578 INFO - c.d.s.w.m.XXXXBean: counterFirstNames length :1
12:56:06.578 INFO - c.d.s.w.m.XXXXBean: Accounting
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" template="/templates/LkmTemplate.jsf" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core"> <ui:param name="pageTitle" value="工程部补录工时"/> <ui:define name="head"></ui:define> <ui:define name="content-introduction"> <h1>工程部补录工时</h1> </ui:define> <ui:define name="content"> <p:growl showDetail="true" id="grlInfo" widgetVar="grlInfo"> <p:autoUpdate/> </p:growl> <p:outputPanel id="title_Bar"> <div class="ui-inputgroup" style="display:-webkit-flex;flex-wrap: wrap;"> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon" style="width:80px;">订单号</span> <p:inputText id="orderNo" style="width:120px" value="#{engWTChangeBean.orderNo}" valueChangeListener="#{engWTChangeBean.orderNoChange}"> <p:ajax event="change" actionListener="#{engWTChangeBean.orderNoChange}" update="q_plateNo"/> </p:inputText> </div> <p:spacer width="10px" height="10px"/> <div class="ui-inputgroup" > <div class="ui-inputgroup"> <span class="ui-inputgroup-addon">板名</span> <p:selectCheckboxMenu id="q_plateNo" multiple="true" emptyLabel="请选择" value="#{engWTChangeBean.addPlateNos}" style="width:130px;"> <f:selectItems value="#{engWTChangeBean.plateList}"/> </p:selectCheckboxMenu> </div> </div> <p:spacer width="10" height="10"/> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon" style="width:80px;">分钟数</span> <p:inputText id="minutes" style="width:120px" value="#{engWTChangeBean.minutes}" type="number" min="1"/> </div> <p:spacer width="10" height="10"/> <div class="ui-inputgroup" style="display:inline-block; "> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon">项目</span> <p:selectOneMenu id="process" label="请选择" value="#{engWTChangeBean.process}" style="width:130px;"> <f:selectItem itemLabel="客户变更补工时" itemValue="客户变更补工时"/> <f:selectItem itemLabel="配合生产调整变更补工时" itemValue="配合生产调整变更补工时"/> </p:selectOneMenu> </div> </div> <p:spacer width="10" height="10"/> <div class="ui-inputgroup"> <span class="ui-inputgroup-addon" style="width:80px;">备注</span> <p:inputText id="remark" style="width:200px" value="#{engWTChangeBean.remark}"/> </div> <p:spacer width="10px" height="10px"/> <p:commandButton styleClass="info-btn" value="提交" onclick="PF('overWeldingStatusDialog').show()" actionListener="#{engWTChangeBean.doSubmit}" update="title_Bar"/> </div> </p:outputPanel> <p:dialog modal="true" id="overWdldingStatusDialog" widgetVar="overWeldingStatusDialog" header="正在处理中....请稍后!" draggable="false" closable="false" resizable="false"> <p:graphicImage value="/quality/img/ajaxloadingbar.gif"/> </p:dialog> </ui:define> </ui:composition> 板名多选就会导致除了项目以外的选项一并把框变大,如何只变大板名选项框
最新发布
11-26
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值