首頁猿問如何使用 JavaScript...

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

Python

慕碼人2483693 2023-12-26 17:03:30

我目前正在重構一個使用 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);

};

反對回復 2023-12-26

1 回答
0 關注
160 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答