如何让PrimeFaces DataTable指定列可拖拽？

刚好之前做过类似的需求，PrimeFaces默认开启draggableColumns后确实会让所有列都能拖拽，但要指定特定列可拖拽其实不难，给你两种实用的方案：

方案一：利用列的draggable属性快速控制（推荐） #

PrimeFaces 6.0及以上版本的p:column组件支持draggable属性，搭配DataTable的draggableColumns="true"就能精准控制哪些列可以拖拽：

<p:dataTable id="productTable" value="#{productBean.products}" var="product" draggableColumns="true">
    <!-- 这一列允许拖拽 -->
    <p:column headerText="产品名称" draggable="true">
        #{product.name}
    </p:column>
    
    <!-- 这一列禁止拖拽 -->
    <p:column headerText="产品ID" draggable="false">
        #{product.id}
    </p:column>
    
    <!-- 按需设置其他列 -->
    <p:column headerText="库存数量" draggable="false">
        #{product.stock}
    </p:column>
</p:dataTable>

原理很简单：当DataTable开启全局拖拽后，列的draggable默认是true，我们只需要给不需要拖拽的列手动设置draggable="false"，就能实现只有指定列可拖拽的效果。这个方法最省心，代码改动也最小。

方案二：自定义拖拽逻辑（适合旧版本或复杂场景） #

如果你的PrimeFaces版本低于6.0，或者需要更灵活的拖拽行为（比如自定义拖拽样式、拖拽触发条件），可以用PrimeFaces的p:draggable和p:droppable组件手动实现：

前端代码： #

<p:dataTable id="orderTable" value="#{orderBean.orders}" var="order" binding="#{orderBean.dataTable}">
    <!-- 可拖拽的列 -->
    <p:column headerText="订单日期" id="dragColumn">
        <f:facet name="header">
            <h:outputText value="订单日期" />
            <!-- 给列头部添加拖拽功能 -->
            <p:draggable for="dragColumn" revert="true" helper="clone" cursor="move" />
        </f:facet>
        #{order.orderDate}
    </p:column>
    
    <!-- 可接受拖拽的目标列 -->
    <p:column headerText="客户名称" id="dropColumn1">
        <f:facet name="header">
            <h:outputText value="客户名称" />
            <p:droppable for="dropColumn1" tolerance="intersect" onDrop="#{orderBean.handleColumnDrop}" />
        </f:facet>
        #{order.customerName}
    </p:column>
    
    <!-- 其他列同理配置 -->
</p:dataTable>

后台Bean代码： #

import org.primefaces.event.DragDropEvent;
import org.primefaces.component.datatable.DataTable;
import javax.faces.component.UIColumn;
import java.util.Collections;
import java.util.List;

@ManagedBean
@ViewScoped
public class OrderBean {
    @ManagedProperty("#{orderService}")
    private OrderService orderService;
    private List<Order> orders;
    private DataTable dataTable; // 绑定前端的DataTable

    // 省略getter/setter和初始化方法

    public void handleColumnDrop(DragDropEvent event) {
        // 获取拖拽的列和目标列
        UIColumn draggedCol = (UIColumn) event.getDraggableComponent();
        UIColumn targetCol = (UIColumn) event.getDroppableComponent();

        // 获取DataTable的列列表，调整顺序
        List<UIColumn> columns = dataTable.getColumns();
        int draggedIndex = columns.indexOf(draggedCol);
        int targetIndex = columns.indexOf(targetCol);

        if (draggedIndex != -1 && targetIndex != -1) {
            Collections.swap(columns, draggedIndex, targetIndex);
        }
    }
}

这个方案需要自己处理列的顺序调整，但优势是完全可控，适合有特殊需求的场景。

内容的提问来源于stack exchange，提问作者user3309305