Как переупорядочить ряд полей ввода HTML, не попадая в AJAX - PullRequest
Новая
       10

Как переупорядочить ряд полей ввода HTML, не попадая в AJAX

1 голос
/ 12 сентября 2009

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 12 сентября 2009

Вы можете написать функцию 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 для такой простой задачи, как эта.

2 голосов
/ 13 сентября 2009

Добавление к ответу Иосифа ...

Согласно спецификации W3C DOM Level 2 Core :

InsertBefore

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

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

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

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

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}
0 голосов
/ 12 сентября 2009

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

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

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

...