从 JavaScript 向 p:remoteCommand 传递参数

Question

我想将值从 javascript 传递给remoteCommand 。 如果这是可能的，我该怎么做以及如何在支持 bean 中接收它们？

Answer 1

对的，这是可能的。 如何做到这一点取决于 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;

（注意：您可以在 Mojarra 中使用Integer ，但不能在 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'});

它可以通过通常的方式在支持 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 请求参数一样指定具有多个值的单个参数（这在现实世界中用于例如多选下拉列表和多选复选框组）。

---

也可以看看：

• 使用 CDI 和 JSF2 依赖注入请求参数
• 如何使用本机 JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean？

Answer 2

页：

<p:remoteCommand name="command" action="#{bean.method}" />

JavaScript：

command({param: 'value'});

豆：

public void method() {
    String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
}

Answer 3

remoteCommandFunctionName({name1:'value1', name2:'value2'});

Answer 4

结合@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;
    }
}

Answer 5

当你需要从 javascript 传递多个参数时，语法是：


var param1 = ...;
var param2 = ...;
var param3 = ...;

remoteCommandFunction([{name:'param1', value: param1 }, {name:'param2',value: param2 }, {name:'param3',value: param3 }]);

Answer 6

如果你想调用自己的函数，例如。 确认对话框，您的自定义函数必须符合传递参数样式。 例如：

   <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}" />

Answer 7

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 &lt; columnsCount; i++) {
                    json[i] = { name: i, value: document.getElementById('table').rows[0].cells[i].offsetWidth};

                }

                console.log(json);
                remoteCommand(json);
            };
    </script>