Как изменить порядок строк полей ввода HTML, не заходя в AJAX

StackOverflow https://stackoverflow.com/questions/1414594

  •  06-07-2019
  •  | 
  •  

Вопрос

Я генерирую набор строк текстовых полей ввода HTML, которые я хочу, чтобы мои конечные пользователи могли изменять порядок.Я не хочу использовать AJAX, но с Javascript у меня все в порядке.

Меня устраивают кнопки со стрелками, расположенные сбоку от каждой строки, которые при нажатии перемещают поля вверх и вниз.

Моя проблема с AJAX заключается в том, что он слишком тяжел (50-60 КБ) только для этой функции.Я просмотрел код Yahoo (YUI), но опять же, для одной конкретной функции он кажется излишним.Я нашел это - http://www.danvk.org/wp/dragtable/ - который кажется самым легким кодом, но позволяет только переупорядочивать столбцы.

Я буду работать над последним вариантом, но я открыт для других мыслей/подходов о том, как это сделать (т. е. разрешить пользователю изменять порядок полей по строкам).

ПС:Полагаю, это не важно для этого обсуждения, но я использую PHP для генерации этих текстовых полей HTML.

Это было полезно?

Решение

Добавляю к ответу Йозефа...

В соответствии с Спецификация ядра W3C DOM уровня 2:

вставитьперед

Вставляет узел newChild перед существующим дочерним узлом refChild....] Если Newchild уже находится на дереве, он сначала удален.

Таким образом, нет необходимости звонить removeChild() перед звонком insertChild().

Кроме того, поддержка DOM в IE6 очень плохая, поэтому вам может потребоваться написать для нее специальный код.Или, может быть, вы предпочитаете не тратить время на поддержку этого браузера и попросить пользователей обновиться.Или, если вам действительно нужна поддержка IE6, возможно, использование библиотеки JavaScript (например, jQuery) может быть простым решением.

Редактировать: Это окончательное решение JavaScript, основанное на ответе Йозефа:

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

Другие советы

Вы можете написать функцию javascript, похожую на эту 

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

и используйте его в своих строках следующим образом: 

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

Я согласен с вами, что вам не нужно ссылаться на инфраструктуру Javascript для такой простой задачи, как эта.

Вы, кажется, смущены; AJAX - это общий термин, относящийся к использованию Javascript для загрузки дополнительного содержимого с сервера посредством подзапросов без фактической загрузки новой страницы. Существует множество различных библиотек Javascript, которые могут обрабатывать запросы AJAX.

Возможно, вы думаете об одной из наиболее популярных библиотек, таких как JQuery, когда говорите «AJAX»?

Что касается вашего вопроса - следует помнить, что при правильной конфигурации сервера браузеры клиента обычно кэшируют библиотеки Javascript после первого запроса; таким образом, общее время загрузки не зависит от размера таких библиотек - только загрузка первой страницы. Вы можете даже избежать этого, если используете размещенная в Google копия JQuery , которая, вероятно, уже будет кэшироваться большинством посетителей вашего сайта.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top