如何使用 JavaScript 为表中的行创建重新排序功能

Question

我目前正在重构一个使用 Python 小部件和 JavaScript 的项目。它目前使用具有重新排序功能的表，该功能可以进行一些重大改进。使用“reorderRowDown”按钮时，它可以正常工作，当前行向下移动，上一行和下一行相应调整。然而，在“reorderRowUp”按钮上，当前行只是在当前行和上一行之间来回交替。（我希望我能很好地解释这一点，我很抱歉）将当前行移到表中非常笨重。我想实现类似于“reorderRowDown”的功能，其中当单击“reorderRowUp”时，当前行向上移动，上一行和下一行相应调整。总之，我想知道如何以正确的方式向上或向下实现表中行的重新排序。任何帮助将不胜感激。（以下是下面发布的 gif，以更好地演示我所引用的场景）reorderRowDown 示例：https://media.giphy.com/media/8WHiGw57pPTK9Zdibk/giphy.gif重新排序行示例：https://media.giphy.com/media/Wp7x9GtYDX29cFLT6I/giphy.gif这是我的代码（如果您需要更多，请告诉我）PathContext.js'use strict';module.exports = () => {  window.reorderRowUp = function(ruleSetIdPriority) {    let ruleSetId;    ruleSetId = ruleSetIdPriority.split('-priority')[0];    const row = document.getElementById(ruleSetId);    const table = row.parentNode;    const prevRow = row.previousElementSibling;    table.insertBefore(row, prevRow);  };  window.reorderRowDown = function(ruleSetIdPriority) {    let ruleSetId;    ruleSetId = ruleSetIdPriority.split('-priority')[0];    const row = document.getElementById(ruleSetId);    const table = row.parentNode;    const nextRow = row.nextElementSibling;    table.insertBefore(nextRow, row);  };};reorder_row_widget.html<button class="reorder-btn" type="button" onclick=reorderRowUp("{{widget.name}}")>Up</button><button class="reorder-btn" type="button" onclick=reorderRowDown("{{widget.name}}")>Down</button><input id="{{ widget.name }}" type="hidden" name="{{ widget.name }}" value="{{ widget.value }}"></input>这是我的浏览器控制台中实际表行的 html

Answer 1

这是我用来解决问题并创建更好的 UI 的实现。我重构了 PathContext.js 文件。

  function replaceReorderFunction() {

    const reorderRowUp = window.reorderRowUp || function() {};

    const reorderRowDown = window.reorderRowDown || function() {};

    // when page gets rendered, django creates a hidden row with a special ruleSetId with id __prefix__

    // once 'add new row' is clicked, a real ruleSetId is given to the row

    // need to replace the reorder function of that row so that it uses the proper ruleSetId so the row can be reordered properly

    // should only need to happen once, on the first reordering after the row is added

    // therefore I assume that the row in question is always at the bottom of the table

    const tableWrapper = document.getElementById('rule_set-group');

    const tbody = tableWrapper.querySelector('tbody');

    const rowToUpdate = tbody.lastElementChild.previousElementSibling.previousElementSibling;

    const priorityField = rowToUpdate.getElementsByClassName('field-priority')[0];

    const buttons = priorityField.getElementsByTagName('button');

    buttons[0].onclick = () => {reorderRowUp(rowToUpdate.id);};

    buttons[1].onclick = () => {reorderRowDown(rowToUpdate.id);};

    return rowToUpdate.id;

  }

  window.reorderRowUp = function(ruleSetIdPriority) {

    let ruleSetId;

    // it's a new row, ruleSetId is not correct

    if (ruleSetIdPriority.match(/__prefix__/)) {

      // get the proper ruleSetId and replace existing onclick functions

      ruleSetId = replaceReorderFunction();

    } else {

      ruleSetId = ruleSetIdPriority.split('-priority')[0];

    }

    const row = document.getElementById(ruleSetId);

    const table = row.parentNode;

    const prevRow = row.previousElementSibling;

    if (!prevRow) {

      return;

    }

    table.insertBefore(row, prevRow);

    // swap priority values

    const prevPriorityValue = getPriorityValueFromRow(prevRow);

    const curPriorityValue = getPriorityValueFromRow(row);

    setPriorityValueOfRow(row, prevPriorityValue);

    setPriorityValueOfRow(prevRow, curPriorityValue);

  };

  window.reorderRowDown = function(ruleSetIdPriority) {

    let ruleSetId;

    // it's a new row, ruleSetId is not correct

    if (ruleSetIdPriority.match(/__prefix__/)) {

      ruleSetId = replaceReorderFunction();

    } else {

      ruleSetId = ruleSetIdPriority.split('-priority')[0];

    }

    const row = document.getElementById(ruleSetId);

    const table = row.parentNode;

    const nextRow = row.nextElementSibling;

    if (!nextRow || nextRow.className === 'add-row' || nextRow.id.includes('empty')) {

      return;

    }

    table.insertBefore(nextRow, row);

    // swap priority values

    const nextPriorityValue = getPriorityValueFromRow(nextRow);

    const curPriorityValue = getPriorityValueFromRow(row);

    setPriorityValueOfRow(row, nextPriorityValue);

    setPriorityValueOfRow(nextRow, curPriorityValue);

  };