如何使用 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 文件。&nbsp; function replaceReorderFunction() {&nbsp; &nbsp; const reorderRowUp = window.reorderRowUp || function() {};&nbsp; &nbsp; const reorderRowDown = window.reorderRowDown || function() {};&nbsp; &nbsp; // when page gets rendered, django creates a hidden row with a special ruleSetId with id __prefix__&nbsp; &nbsp; // once 'add new row' is clicked, a real ruleSetId is given to the row&nbsp; &nbsp; // need to replace the reorder function of that row so that it uses the proper ruleSetId so the row can be reordered properly&nbsp; &nbsp; // should only need to happen once, on the first reordering after the row is added&nbsp; &nbsp; // therefore I assume that the row in question is always at the bottom of the table&nbsp; &nbsp; const tableWrapper = document.getElementById('rule_set-group');&nbsp; &nbsp; const tbody = tableWrapper.querySelector('tbody');&nbsp; &nbsp; const rowToUpdate = tbody.lastElementChild.previousElementSibling.previousElementSibling;&nbsp; &nbsp; const priorityField = rowToUpdate.getElementsByClassName('field-priority')[0];&nbsp; &nbsp; const buttons = priorityField.getElementsByTagName('button');&nbsp; &nbsp; buttons[0].onclick = () => {reorderRowUp(rowToUpdate.id);};&nbsp; &nbsp; buttons[1].onclick = () => {reorderRowDown(rowToUpdate.id);};&nbsp; &nbsp; return rowToUpdate.id;&nbsp; }&nbsp; window.reorderRowUp = function(ruleSetIdPriority) {&nbsp; &nbsp; let ruleSetId;&nbsp; &nbsp; // it's a new row, ruleSetId is not correct&nbsp; &nbsp; if (ruleSetIdPriority.match(/__prefix__/)) {&nbsp; &nbsp; &nbsp; // get the proper ruleSetId and replace existing onclick functions&nbsp; &nbsp; &nbsp; ruleSetId = replaceReorderFunction();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; ruleSetId = ruleSetIdPriority.split('-priority')[0];&nbsp; &nbsp; }&nbsp; &nbsp; const row = document.getElementById(ruleSetId);&nbsp; &nbsp; const table = row.parentNode;&nbsp; &nbsp; const prevRow = row.previousElementSibling;&nbsp; &nbsp; if (!prevRow) {&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; table.insertBefore(row, prevRow);&nbsp; &nbsp; // swap priority values&nbsp; &nbsp; const prevPriorityValue = getPriorityValueFromRow(prevRow);&nbsp; &nbsp; const curPriorityValue = getPriorityValueFromRow(row);&nbsp; &nbsp; setPriorityValueOfRow(row, prevPriorityValue);&nbsp; &nbsp; setPriorityValueOfRow(prevRow, curPriorityValue);&nbsp; };&nbsp; window.reorderRowDown = function(ruleSetIdPriority) {&nbsp; &nbsp; let ruleSetId;&nbsp; &nbsp; // it's a new row, ruleSetId is not correct&nbsp; &nbsp; if (ruleSetIdPriority.match(/__prefix__/)) {&nbsp; &nbsp; &nbsp; ruleSetId = replaceReorderFunction();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; ruleSetId = ruleSetIdPriority.split('-priority')[0];&nbsp; &nbsp; }&nbsp; &nbsp; const row = document.getElementById(ruleSetId);&nbsp; &nbsp; const table = row.parentNode;&nbsp; &nbsp; const nextRow = row.nextElementSibling;&nbsp; &nbsp; if (!nextRow || nextRow.className === 'add-row' || nextRow.id.includes('empty')) {&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; table.insertBefore(nextRow, row);&nbsp; &nbsp; // swap priority values&nbsp; &nbsp; const nextPriorityValue = getPriorityValueFromRow(nextRow);&nbsp; &nbsp; const curPriorityValue = getPriorityValueFromRow(row);&nbsp; &nbsp; setPriorityValueOfRow(row, nextPriorityValue);&nbsp; &nbsp; setPriorityValueOfRow(nextRow, curPriorityValue);&nbsp; };