通过 <p:commandButton> 的 oncomplete 属性实现其它按钮的激活与反激活

2019独角兽企业重金招聘Python工程师标准>>>

刚刚解决了壹個细小的技术问题，用 PrimeFaces 4.0 的 UI 组件完成界面元素的开发，XHTML 页面上共有三個按钮，id 分别为 verifyButton、viewButton、downloadButton，其中页面初始化时，verifyButton 处于激活状态（enable），viewButton 和 downloadButton 处于未激活状态（disable），当点击 verifyButton 之后，页面会向后台 Controller 发送 ajax 请求，然后在完成壹些业务逻辑之后返回页面，并将 viewButton 和 downloadButton 激活，此时三個按钮均处于可点击状态。页面部分源代码如下所示：

<h:form id="verificationForm">
<div class="button-padding right mt10">
	<p:commandButton id="verifyButton" value="校验" update="@this"
		widgetVar="verifyButton"
		disabled="#{!batchVerificationMB.enabledVerifyButton()}"
		process="@this batchVerificationTable"
		actionListener="#{batchVerificationMB.verify()}"
		oncomplete="validationUtil.handleAjaxResponse(args, displayErrorMessagesBathVerification, function(){displayVerifyMessage();viewButton.enable();downloadButton.enable();})" />
	<p:commandButton id="viewButton" value="查看"
		process="@this" widgetVar="viewButton"
		update=":verificationResultForm"
		onclick="verificationResultDialog.show();" />
	<p:commandButton id="downloadButton" value="导出" 
		process="@this" widgetVar="downloadButton"
		ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)" icon="ui-icon-arrowthichk-s">
		<p:fileDownload value="#{fileDownloadController.file}" />
	</p:commandButton>
	<script type="text/javascript">
		viewButton.disable();
		downloadButton.disable();
	</script>
</div>
</h:form>

<h:form id="verificationResultForm">
//...此处省略部分代码
</h:form>
<p:dialog widgetVar="verificationResultDialog" modal="true" closable="true" resizable="false" width="800">
//...此处省略部分代码
</p:dialog>

其实只有两個地方需要注意，分别列举如下：
1、页面初始化时，我们需要通过Javascript脚本将viewButton和downloadButton设置为disable状态，见于第19和20行，其实就是普通的Javascript脚本；
2、另外，由于后面两個按钮是否激活是受按钮verifyButton控制的，所以我们需要在verifyButton里加上壹個属性 oncomplete，然后在 oncomplete 里面控制 viewButton 和 downloadButton 的激活状态；代码很长，但是并不复杂，实际只做了以下事情：先将后台反馈的信息显示在界面指定位置上，然后将 viewButton 和 downloadButton 激活；我们把 oncomplete 里的代码抽取出来是这样的。

validationUtil.handleAjaxResponse(
	args, 
	displayErrorMessagesBathVerification, 
	function(){
		//显示后台反馈的信息
		displayVerifyMessage();
		//将viewButton和downloadButton状态激活
		viewButton.enable();
		downloadButton.enable();
	}
)

其实说起来，PrimeFaces 4.0 的 <p:commandButton> 用起来并不复杂，只是自己还不熟悉其用法罢了。查看 PrimeFaces 4.0 官方文档是，它是这样介绍 oncomplete 属性的： 默认值为null，类型为String，当ajax请求完成之后客户端会回调属性oncomplete指定的内容。其实已经说的非常简单明了了。类似的事件属性还有 onstart、onsuccess、onerror 等，如果有兴趣的朋友可以自行查找 相关文档以了解更多细节。

转载于:https://my.oschina.net/bairrfhoinn/blog/186188