Primefaces cellEditor在ajax提交中传递整个数据表

Question

我有一个数据表，其中每行有24小时输入字段。在某个时间点，有超过1000个可编辑的输入字段。我注意到在ajax调用primefaces时使用p：cellEditor是在提交整个数据表。我怎么能避免这种情况？ 请在下面找到我所拥有的代码，并在其中找到关于每个重要部分的评论。

        <!-- Fires the cellEdit event to trigger the validations to happen as user tabs out of the input box -->
    <p:ajax event="cellEdit" listener="#{renderValidator.onCellEdit}"  update=":#{p:component('globalMessages')}" process="@this" /> 

    <p:column id="hour1" styleClass="col-right col-90">
        <f:facet name="header">
            <h:outputText value="1" escape="false"/>
        </f:facet>
        <p:cellEditor > 

            <f:facet name="output">
            <h:outputText value="#{row.amount[0]}" escape="false">
            <f:convertNumber  maxFractionDigits="3" minFractionDigits="3" maxIntegerDigits="5" />
            </h:outputText>
            </f:facet> 
            <f:facet name="input">
            <p:inputText id="hour1Input" value="#{row.amount[0]}" maxlength="10" size="10"  readonly="#{row.readOnly}" onchange='PowerMeter.setPowerMeterChange()'
            styleClass="col-right" valueChangeListener="#{row.setDirtyFlag(true)}"  >
            <!-- formats data the way its displayed -->
            <f:convertNumber  maxFractionDigits="3" minFractionDigits="3" maxIntegerDigits="5" />
            <!-- validates the input value w.r.t a custom validator -->
            <f:validator validatorId="hourlyValueValidator" for="hour1Input" /> 
            <!-- javascript restricting user to input alpha numeric characters -->
            <pe:keyFilter testFunction="return PowerMeter.isValidMWH(this, c);" />
            </p:inputText>
            </f:facet>          
        </p:cellEditor>
    </p:column> 

Answer 1

在Ajax请求中，JSF默认发送表单中所有输入组件的数据。即使在部分生命周期中只执行了100个组件中的一个。使用PrimeFaces，您可以通过将partialSubmit设置为true来改变此行为：

<p:ajax partialSubmit="true" event="cellEdit" process="@this"
    listener="#{renderValidator.onCellEdit}"
    update=":#{p:component('globalMessages')}"/> 

Answer 2

Primefaces使用PrimeFaces.ajax.AjaxUtils.send函数来构建Ajax请求。要确定需要将哪些数据发送到服务器，它使用jQuery find函数，然后使用serializeArray来构建POST请求。

componentPostParams = jqProcess.find(':input').serializeArray();

不幸的是，当为<p:DataTable>启用 liveScroll 属性并且已经提取了大量数据时，无论<p:cellEditor>是否只有{...}}，它都会处理所有输入控件一个输入面可见。

要更改此功能，我会覆盖以下表单中的PrimeFaces.ajax.AjaxUtils.send功能

var pFacesSend = PrimeFaces.ajax.AjaxUtils.send;
PrimeFaces.ajax.AjaxUtils.send = function(cfg) {
    if (myCase) {
        // Custom send
    } else {
        pFacesSend(cfg);
    }
};

在myCase中我更改了序列化：

componentPostParams = jqProcess.find(':input').serializeArray();

进入：

if (!customSerializationCondition) {
    componentPostParams = jqProcess.find(':input').serializeArray();
} else {
    componentPostParams = jqProcess.find(':input').filter(function() {
        return $(this).parent().css('display') !== 'none';
    }).serializeArray();
}

此解决方案构建一个仅包含可见输入字段的POST请求，并且由于 editMode 设置为 cell ，我只有一个<input>可见。 它适用于 Primefaces v4.0 ，只要输入的父标记使用css display属性在编辑器中隐藏输入方面，它就应该有用。