第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

如何使用 JavaScript 為表中的行創(chuàng)建重新排序功能

如何使用 JavaScript 為表中的行創(chuàng)建重新排序功能

慕碼人2483693 2023-12-26 17:03:30
我目前正在重構(gòu)一個(gè)使用 Python 小部件和 JavaScript 的項(xiàng)目。它目前使用具有重新排序功能的表，該功能可以進(jìn)行一些重大改進(jìn)。使用“reorderRowDown”按鈕時(shí)，它可以正常工作，當(dāng)前行向下移動，上一行和下一行相應(yīng)調(diào)整。然而，在“reorderRowUp”按鈕上，當(dāng)前行只是在當(dāng)前行和上一行之間來回交替。（我希望我能很好地解釋這一點(diǎn)，我很抱歉）將當(dāng)前行移到表中非常笨重。我想實(shí)現(xiàn)類似于“reorderRowDown”的功能，其中當(dāng)單擊“reorderRowUp”時(shí)，當(dāng)前行向上移動，上一行和下一行相應(yīng)調(diào)整?？傊?，我想知道如何以正確的方式向上或向下實(shí)現(xiàn)表中行的重新排序。任何幫助將不勝感激。（以下是下面發(fā)布的 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>這是我的瀏覽器控制臺中實(shí)際表行的 html
查看完整描述

1 回答

?
慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗(yàn) 獲得超8個(gè)贊

這是我用來解決問題并創(chuàng)建更好的 UI 的實(shí)現(xiàn)。我重構(gòu)了 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);

  };



查看完整回答
反對 回復(fù) 2023-12-26
  • 1 回答
  • 0 關(guān)注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號