Primefaces：能否通过commandButton实现拖拽逻辑？

问题描述 #

我了解Primefaces的拖拽功能，希望通过点击commandButton来执行拖拽逻辑。我已找到通过定义moveUp和moveDown函数实现数据表行上下移动的JS代码，但这并非我所需。我的需求是：拥有一个datatable和两个commandButton（向上箭头、向下箭头），点击向上箭头时选中行上移一位，点击向下箭头则下移一位。请问能否通过JS实现该功能？若可以，请提供代码示例。此外我附上了自己编写但无法运行的代码：

function move() {
    var table = $('#mytable').DataTable();

    var firstNode = table.row(rowIndex).node();

    function finalNode(){
        if (document.classList.contains('move up'))
            row(rowIndex - 1).node();
        else
            row(rowIndex + 1).node();
    }

    var LastNode = finalNode();
    
    simulateDragDrop(firstNode, lastNode);
}

function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DRAG_OVER: 'dragover',
        DROP: 'drop'
    }

    function createCustomEvent(type) {
        var event = new CustomEvent("CustomEvent")
        event.initCustomEvent(type, true, true, null)
        event.dataTransfer = {
            data: {
            },
            setData: function(type, val) {
                this.data[type] = val
            },
            getData: function(type) {
                return this.data[type]
            }
        }
        return event
    }

    function dispatchEvent(node, type, event) {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent("on" + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragOver = createCustomEvent(EVENT_TYPES.DRAG_OVER)
    dragOver.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DRAG_OVER, dragOver)
    
    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransfer
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

解决方案 #

可以通过JS模拟PrimeFaces拖拽事件实现需求。先指出你原代码的核心问题：

• 未正确获取选中行索引，也未区分按钮的上下操作方向
• finalNode函数逻辑错误，document.classList.contains写法不成立，且未正确调用DataTable的row方法
• 变量名大小写不一致（LastNode和lastNode）
• 自定义事件不符合PrimeFaces内部的拖拽事件规范

以下是修正后的完整实现：

1. PrimeFaces页面代码 #

定义数据表和操作按钮，为按钮添加标识类区分方向，绑定点击事件：

<h:form id="form">
    <p:dataTable id="mytable" var="item" value="#{bean.items}" draggableRows="true" selection="#{bean.selectedItem}" selectionMode="single">
        <p:column headerText="序号">#{item.id}</p:column>
        <p:column headerText="内容">#{item.content}</p:column>
    </p:dataTable>

    <p:commandButton icon="pi pi-arrow-up" styleClass="move-btn move-up" onclick="moveRow('up'); return false;" />
    <p:commandButton icon="pi pi-arrow-down" styleClass="move-btn move-down" onclick="moveRow('down'); return false;" />
</h:form>

2. JavaScript代码 #

修正逻辑，正确获取组件实例、选中行和目标行，模拟符合PrimeFaces要求的拖拽事件：

function moveRow(direction) {
    // 获取PrimeFaces数据表组件实例（命名规则：表单ID:数据表ID）
    const tableWidget = PF('form:mytable');
    if (!tableWidget) {
        console.error("数据表实例未找到");
        return;
    }

    // 获取选中行索引
    const selectedRowIndex = tableWidget.getSelectedRowIndex();
    if (selectedRowIndex === -1) {
        console.error("请先选中一行");
        return;
    }

    // 计算目标行索引并做边界校验
    let targetRowIndex;
    if (direction === 'up') {
        if (selectedRowIndex === 0) {
            console.warn("已处于第一行，无法上移");
            return;
        }
        targetRowIndex = selectedRowIndex - 1;
    } else if (direction === 'down') {
        if (selectedRowIndex === tableWidget.getRowsCount() - 1) {
            console.warn("已处于最后一行，无法下移");
            return;
        }
        targetRowIndex = selectedRowIndex + 1;
    } else {
        console.error("无效的移动方向");
        return;
    }

    // 获取源行和目标行的DOM节点
    const sourceNode = tableWidget.getRowData(selectedRowIndex).jq[0];
    const targetNode = tableWidget.getRowData(targetRowIndex).jq[0];

    // 执行模拟拖拽
    simulatePrimeFacesDragDrop(sourceNode, targetNode);
}

function simulatePrimeFacesDragDrop(sourceNode, targetNode) {
    const EVENT_TYPES = {
        DRAG_START: 'dragstart',
        DRAG_OVER: 'dragover',
        DROP: 'drop',
        DRAG_END: 'dragend'
    };

    // 创建符合PrimeFaces要求的拖拽事件
    function createDragEvent(type) {
        const event = new MouseEvent(type, { bubbles: true, cancelable: true });
        event.dataTransfer = {
            data: {},
            setData: (key, value) => { this.data[key] = value; },
            getData: (key) => this.data[key],
            effectAllowed: 'move'
        };
        return event;
    }

    // 派发拖拽开始事件
    const dragStartEvent = createDragEvent(EVENT_TYPES.DRAG_START);
    sourceNode.dispatchEvent(dragStartEvent);

    // 派发拖拽经过事件，标记目标为可放置区域
    const dragOverEvent = createDragEvent(EVENT_TYPES.DRAG_OVER);
    targetNode.dispatchEvent(dragOverEvent);

    // 派发放置事件，触发PrimeFaces行移动逻辑
    const dropEvent = createDragEvent(EVENT_TYPES.DROP);
    dropEvent.dataTransfer = dragStartEvent.dataTransfer;
    targetNode.dispatchEvent(dropEvent);

    // 派发拖拽结束事件，完成流程
    const dragEndEvent = createDragEvent(EVENT_TYPES.DRAG_END);
    dragEndEvent.dataTransfer = dragStartEvent.dataTransfer;
    sourceNode.dispatchEvent(dragEndEvent);
}

代码说明 #

• 使用PF()获取PrimeFaces官方组件实例，避免直接操作DOM的兼容性问题
• 增加边界判断，防止行移动超出数据表范围
• 模拟的拖拽事件完全匹配PrimeFaces内部逻辑，确保触发其内置的行移动处理
• 按钮点击时通过return false;阻止默认表单提交，仅执行JS逻辑

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