我目前正在重构一个使用 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
1 回答
慕桂英3389331
TA贡献2036条经验 获得超8个赞
这是我用来解决问题并创建更好的 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);
};
添加回答
举报
0/150
提交
取消