使用jQuery实现表格整组行上下移动排序功能求助

需求说明 #

• 点击#trMain-1989的向下按钮时，该行及后续4行需移动到#trMain-1991之后
• 点击#trMain-1995的向上按钮时，包含它的5行（#trMain-1995、#trLang-1995、#trQuestion-1995、#trAnswer-1995、#trAct-1995）需移动到#trMain-1993之前

尝试过的代码 #

代码1 #

$(document).on('click','.fas', function(event){
    var $element = this;
    var row = $($element).parents("tr:first");
    let index = oTable.row(row).index();
    console.log(index);
    if($(this).is('.up')){
        row.eq(index-4).insertBefore(row.prev());
    }else{
        row.eq(index+4).insertAfter(row.next());
    }
    return false;
});

代码2 #

$(document).on('click','.fas', function(event){
    
    if(oTable){
        let tr = $(this).closest('tr');
        let cls = $(tr).attr("class");
        //console.log(cls);
            cls = cls.split("-");
        //console.log(cls[1]);
        let index = oTable.row(tr).index();
        let indexes = oTable.rows()[0];
        
        let order = -1;
        let buttonName = event.currentTarget.className;
        if(buttonName.indexOf('down') > 0){
            order = 1;
        }
        
        let data1 = oTable.row(index).data();
        console.log(data1);
        let base_index = indexes.indexOf(index) + order;
        console.log(base_index);
        let index2 = indexes[base_index];
        console.log(index2);
        var data2 = oTable.row(index2).data();
        //console.log(data1);
        oTable.row(index).data(data2);
        oTable.row(index2).data(data1);
});

解决方案 #

核心是先定位完整的目标行组，再处理DOM移动，同时同步DataTables的内部数据避免不同步。

实现代码 #

$(document).on('click', '.fas.up, .fas.down', function(event) {
    event.preventDefault();
    
    // 获取当前点击的主行（trMain-xxx）
    const $mainRow = $(this).closest('tr[id^="trMain-"]');
    if (!$mainRow.length) return;
    
    // 选中当前完整行组：主行 + 后续4个附属行
    const $rowGroup = $mainRow.add($mainRow.nextUntil(':not([id^="trLang-"], [id^="trQuestion-"], [id^="trAnswer-"], [id^="trAct-"])'));
    if ($rowGroup.length !== 5) return;
    
    const isDown = $(this).hasClass('down');
    
    if (isDown) {
        // 向下移动：定位目标主行，将行组移到其附属行末尾之后
        const $targetMainRow = $('#trMain-1991');
        if ($targetMainRow.length) {
            const $targetLastRow = $targetMainRow.nextUntil(':not([id^="trLang-"], [id^="trQuestion-"], [id^="trAnswer-"], [id^="trAct-"])').last();
            $rowGroup.insertAfter($targetLastRow);
            oTable.rows().invalidate().draw(false);
        }
    } else {
        // 向上移动：定位目标主行，将行组移到其前面
        const $targetMainRow = $('#trMain-1993');
        if ($targetMainRow.length) {
            $rowGroup.insertBefore($targetMainRow);
            oTable.rows().invalidate().draw(false);
        }
    }
});

关键说明 #

• closest('tr[id^="trMain-"]')：确保只响应主行按钮的点击，避免误操作附属行
• nextUntil(':not(...)')：精准选中同组的所有附属行，保证行组完整性
• oTable.rows().invalidate().draw(false)：通知DataTables同步DOM数据，同时保留当前视图不重置分页

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