我想remoteCommand
从 javascript 传递值。如果这是可能的,我该怎么做以及如何在 backing bean 中接收它们?
7 回答
是的,有可能。如何做到这一点取决于 PrimeFaces 版本。您可以在PrimeFaces 用户指南中看到它。
PrimeFaces 3.3 或更新版本
自 PrimeFaces 3.3 版以来,语法如下(从 3.3 用户指南复制粘贴)。
3.81 远程命令
...
传递参数
远程命令可以通过以下方式发送动态参数;
increment([{name:'x', value:10}, {name:'y', value:20}]);
这种方式提供了在单个参数名称上指定多个值的可能性。像上面这样具有单个值的参数的可用方式与旧方式相同:
@ManagedProperty("#{param.x}")
private int x;
@ManagedProperty("#{param.y}")
private int y;
(注意:您可以Integer
在 Mojarra 中使用,但不能在 MyFaces 中使用,这与 完全无关<p:remoteCommand>
)
或以更广泛的 bean 的方法:
Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
int x = Integer.valueOf(params.get("x"));
int y = Integer.valueOf(params.get("y"));
如果您需要指定具有多个值的参数,则可以按如下方式执行:
functionName([{name:'foo', value:'one'}, {name:'foo', value:'two'}, {name:'foo', value:'three'}]);`
在请求范围的 bean 中:
@ManagedProperty("#{paramValues.foo}")
private String[] foos;
或以更广泛的 bean 的方法:
Map<String, String[]> paramValues = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterValuesMap();
String[] foos = paramValues.get("foo");
PrimeFaces 3.2 或更早版本
在PrimeFaces 3.3 版之前,语法如下(从 3.2 用户指南复制粘贴):
3.80 远程命令
...
传递参数
远程命令可以通过以下方式发送动态参数;
increment({param1:'val1', param2:'val2'});
它可以通过通常的方式在 backing bean 中使用。例如在请求范围的 bean 中:
@ManagedProperty("#{param.param1}")
private String param1;
@ManagedProperty("#{param.param2}")
private String param2;
或以更广泛的 bean 的方法:
Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
String param1 = params.get("param1");
String param2 = params.get("param2");
然而,这种方法的缺点是您不能像使用普通 HTML 表单和 HTTP 请求参数(在现实世界中使用例如多选下拉列表和多选复选框组)那样指定具有多个值的单个参数。
也可以看看:
页:
<p:remoteCommand name="command" action="#{bean.method}" />
JavaScript:
command({param: 'value'});
豆:
public void method() {
String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
}
remoteCommandFunctionName({name1:'value1', name2:'value2'});
结合@BalusC @Joel 的帖子作为功能示例
<h:form>
<p:remoteCommand name="rcName" update="msgs" actionListener="#{remoteCommandView.beanMethod}" />
<p:growl id="msgs" showDetail="true" />
<p:commandButton type="button" onclick="rcName([{name:'model', value:'Buick Encore'}, {name:'year', value:2015}]);" value="Pass Parameters 1" /><br/>
<p:commandButton type="button" onclick="clicked();" value="Pass Parameters 2" />
</h:form>
<script type="text/javascript">
//<![CDATA[
function clicked(){
rcName([{name:'model', value: 'Chevy Volt'}, {name:'year', value:2016}]);
}
//]]>
</script>
@ManagedBean
public class RemoteCommandView {
public void beanMethod() {
// OR - retrieve values inside beanMethod
String model1 = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("model");
String year1 = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("year");
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Executed",
"Using RemoteCommand with parameters model := " + model + ", year := " + year));
}
@ManagedProperty("#{param.model}")
private String model;
@ManagedProperty("#{param.year}")
private int year;
public void setModel(String model) {
this.model = model; // value set by JSF
}
public void setYear(int year) {
this.year = year;
}
}
当您需要从 javascript 传递多个参数时,语法为:
var param1 = ...;
var param2 = ...;
var param3 = ...;
remoteCommandFunction([{name:'param1', value:param1}, {name:'param2',value:param2}, {name:'param3',value:param3}]);
如果你想调用你自己的函数,例如。确认对话框,您的自定义函数必须符合传递参数样式。例如:
<p:commandLink id="myId" onclick="confirmDelete([{name:'Id', value: '#{my.id}'}]);" immediate="true">
java脚本函数
function confirmDelete(id) {
if (confirm('Do you really want to delete?')) {
remoteDeleteDemand(id);
return true;
}
远程命令标签
<p:remoteCommand name="remoteDeleteDemand" actionListener="#{myController.doDelete}" />
PrimeFace 5.0,动态数组(所有表格列宽将通过此方法发送)
光束
public void updateTableColumnsWidth() {
FacesContext context = FacesContext.getCurrentInstance();
Map<String, String> map = context.getExternalContext().getRequestParameterMap();
}
p:远程命令
<h:form>
<p:remoteCommand name="remoteCommand" action="#{controller.updateTableColumnsWidth}" />
</h:form>
JS
<script type="text/javascript">
function updateTableColumnsWidth () {
var columnsCount = document.getElementById('table').rows[0].cells.length;
var json = [];
for (var i = 0; i < columnsCount; i++) {
json[i] = { name: i, value: document.getElementById('table').rows[0].cells[i].offsetWidth};
}
console.log(json);
remoteCommand(json);
};
</script>