jsf-2 - Primefaces 重新排序包含输入的行

Question

有p:dataTable与 p:inputText在列中:

<h:form id="form">
    <p:dataTable id="dataTable" value="#{rowReorder.dataList}" 
                 var="row" draggableRows="true" rowKey="#{row.id}">
        <p:ajax event="rowReorder" listener="#{rowReorder.reorder}" update="dataTable"/>

        <p:column>
            <f:facet name="header">
                <p:commandButton value="Add" actionListener="#{rowReorder.addData}" 
                                 update="dataTable" process="dataTable"/>
            </f:facet>
            <p:outputLabel value="#{row.id}"/>
        </p:column>
        <p:column>
            <p:inputText value="#{row.name}"/>
        </p:column>
    </p:dataTable>
</h:form>

支撑 bean :

import org.omnifaces.cdi.ViewScoped;
import org.primefaces.event.ReorderEvent;
import javax.inject.Named;
import java.io.Serializable;
import java.util.LinkedList;
import java.util.List;

@Named("rowReorder")
@ViewScoped
public class RowReorder implements Serializable {

    private List<Data> dataList = new LinkedList<>();

    public void addData() {
        Data data = new Data();
        data.setId(dataList.size() + 1);
        data.setName("Data " + data.getId());
        dataList.add(data);
    }

    public void reorder(ReorderEvent event) {

    }

    /**
     * Getters, Setters
     */

    public List<Data> getDataList() {
        return dataList;
    }
}

数据类:

public class Data implements Serializable {

    private Integer id;
    private String name;

    /**
     * Getters, Setters
     */

}

重新排序前的示例数据表:

--------------
|id |  name  |
--------------
| 1 | Data 1 |
| 2 | Data 2 |
| 3 | Data 3 |
| 4 | Data 4 |
--------------

重新排序后(将第 1 行移至第 3 行):

--------------
|id |  name  |
--------------
| 2 | Data 1 |
| 3 | Data 2 |
| 1 | Data 3 |
| 4 | Data 4 |
--------------

我知道这是因为设置数据来自 p:inputText位于 UPDATE_MODEL阶段。我试图通过指定 process="@none" 来阻止处理输入字段在 p:ajax组件，但它不起作用。知道如何制作 draggableRows和 p:inputText friend 们？

Answer 1

第一个解决方案

我找到了解决办法!
它不处理具有属性的输入(实际上根本不提交它)process="@none" partialSubmit="true"
所以完整的 p:ajax 组件看起来像<p:ajax event="rowReorder" listener="#{rowReorder.reorder}" update="dataTable" process="@none" partialSubmit="true"/>
第二种解决方案(如果需要提交数据)

理论:

让我们看看拖动行时发生了什么？
我们有 ajax 请求强制 process="form:dataTable" .在 APPLY_REQUEST_VALUES 阶段 DataTableRenderer尝试调用 DraggableRowsFeature 的解码依次旋转列表元素(指定为 dataTable 的 value 属性的列表)。所以在 UPDATE_MODEL_VALUES 阶段，我们有一个旋转列表和输入组件，它们希望将它们的值提交给 name Data 的领域对象。但是请求参数在输入 id 中仍然包含旧的行索引:它们是 form:dataTable:1:name = Data 2 , form:dataTable:2:name = Data 3 , form:dataTable:0:name = Data 1 (我添加了 3 行，并将第一行移到了最后一行)。所以在这里我们得到了我们得到的。这样，如果我们需要在正确的位置提交数据，我们必须在 UPDATE_MODEL_VALUES 完成之前阻止我们的列表轮换，
稍后在 INVOKE_APPLICATION 阶段执行此旋转，并在该 ajax 请求上呈现 dataTable:


在 DraggableRowsFeature.decode()我们可以看到 Collections.rotate()仅在值为 List 的实例时调用。

    if (value instanceof List) {
        List list = (List) value;

        if(toIndex >= fromIndex) {
            Collections.rotate(list.subList(fromIndex, toIndex + 1), -1);
        }
        else {
            Collections.rotate(list.subList(toIndex, fromIndex + 1), 1);
        }            
    } 
    else {
        LOGGER.info("Row reordering is only available for list backed datatables, use rowReorder ajax behavior with listener for manual handling of model update.");
    }     

还有 DraggableRowsFeature.shouldDecode()方法。

public boolean shouldDecode(FacesContext context, DataTable table) {
    return context.getExternalContext().getRequestParameterMap().containsKey(table.getClientId(context) + "_rowreorder");
}

所以这里我们有两种可能来防止数据源轮换:

请勿使用 List作为数据表值

创建自己的 org.primefaces.component.datatable.feature.DraggableRowsFeature在 shouldDecode() 中返回 false方法。

实践:

我像这样修改了bean文件:

@Named("rowReorder")
@ViewScoped
public class RowReorder implements Serializable {

    private static final Logger log = LoggerFactory.getLogger(RowReorder.class);
    private Set<Data> dataList = new LinkedHashSet<>();


    public void addData() {
        Data data = new Data();
        data.setId(dataList.size() + 1);
        data.setName("Data " + data.getId());
        dataList.add(data);
        log.warn("{} {}", Integer.toHexString(data.hashCode()), data.getId());
    }

    public void removeData(Data data) {
        dataList.remove(data);
    }

    public void reorder(ReorderEvent event) {
        List<Data> list = new LinkedList<>(dataList);

        int fromIndex = event.getFromIndex();
        int toIndex = event.getToIndex();
        if(toIndex >= fromIndex) {
            Collections.rotate(list.subList(fromIndex, toIndex + 1), -1);
        }
        else {
            Collections.rotate(list.subList(toIndex, fromIndex + 1), 1);
        }
        dataList.clear();
        dataList.addAll(list);
    }

    /**
     * Getters, Setters
     */

    public Set<Data> getDataList() {
        return dataList;
    }
}

现在它首先在 INVOKE_APPLICATION 阶段向模型和轮换列表提交值。