Изменение порядка строк таблицы с изображениями стрелок вверх и вниз? - PullRequest
2 голосов
/ 06 февраля 2009

Я хочу добавить маленькие картинки-стрелки для перемещения вверх и вниз по строке таблицы в Javascript (возможно, jQuery) и сохранить переупорядоченную таблицу (только порядок) в cookie для дальнейшего использования. Примером может быть - Joomla, внутри админки в области Articles (но это делается с помощью php). Спасибо.

Ответы [ 7 ]

3 голосов
/ 06 февраля 2009

Вероятно, можно реорганизовать немного больше, но я оставляю вам экономию:

function swap(a, b, direction){
  var html = a.wrapInner('<tr></tr>').html()
  a.replaceWith(b.wrapInner('<tr></tr>').html())
  b.replaceWith(html)
}
function getParent(cell){ return $(cell).parent('tr') }
$(document).ready(function(){
  $('.upArrow').live('click', function(){
    var parent = getParent(this)
    var prev = parent.prev('tr')
    if(prev.length == 1){ swap(prev, parent); }
  })
  $('.downArrow').live('click', function(){
    var parent = getParent(this)
    var next = parent.next('tr')
    if(next.length == 1){ swap(next, parent) }
  })
})

Исходя из этой таблицы:

<table>
  <tbody>
    <tr><td>1</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
    <tr><td>2</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
    <tr><td>3</td><td class="upArrow">up</td><td class="downArrow">down</td></tr>
  </tbody>
</table>
2 голосов
/ 23 ноября 2012
function UpperBttn_Pressed(this) {

    var RowIndex = X.parentNode.parentNode.rowIndex;
    var ParentTable = X.parentNode.parentNode.parentElement;
    if (RowIndex != 0 && RowIndex != 1) {
        ParentTable.moveRow(RowIndex, RowIndex - 1);
    }

}
function DownBttn_Pressed(this) {

    var RowIndex = X.parentNode.parentNode.rowIndex;
    var ParentTable = X.parentNode.parentNode.parentElement;
    var NthRow = GetElement("dataTable").rows.length;
    if (RowIndex!=NthRow-1) {
        ParentTable.moveRow(RowIndex, RowIndex + 1);
    }

}

2 голосов
/ 06 февраля 2009

Что касается jQuery, вы можете посмотреть, как модифицировать этот плагин , чтобы использовать нажатие на значки вместо перетаскивания.

1 голос
/ 12 ноября 2010

insertBefore () и insertAfter () работают хорошо. В приведенном ниже примере у меня есть пара тегов A в таблице. Нажатие одной перемещает ряд вниз, другой вверх. Если вы дадите своим строкам, которым разрешено перемещаться (возможно, вы не хотите перемещать строки выше строк заголовка или ниже строк нижнего колонтитула), класс _movable, то они будут перемещаться только между строками верхнего и нижнего колонтитула.

Вот один из тегов A: up

function moveUp(aEl) {
    var me = $($(aEl).parents('tr').get(0));
    var prev = me.prev('tr');
    if (prev.attr('class') == '_movable') me.insertBefore(prev);
    return false;
}
function moveDown(aEl) {
    var me = $($(aEl).parents('tr').get(0));
    var next = me.next('tr');
    if (next.attr('class') == '_movable') me.insertAfter(next);
    return false;
}
1 голос
/ 22 августа 2009

Это старый вопрос, но я нашел его, и один из постов поставил меня на правильный курс, так что для всех, кто гуглит здесь

с использованием jQuery

function Func(trigger, blnUp){
var trigRow = $("#" + trigger.id).parent().parent();
var prevRow = trigrRow.prev();
var nextRow = trigRow.next();
var trigRowHTML = "";
if(blnUp){
    trigRowHTML = prevRow.html();
    prevRow.html(trig.html());
}else{
    trigRowHTML = nextRow.html();
    nextRow.html(trig.html());
    }
}

таблица должна выглядеть примерно так:

<table>
  <tbody>
    <tr><td>1</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
    <tr><td>2</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
    <tr><td>3</td><td><a onclick="Func(this, true)">UP</a></td><td><a onclick="Func(this, false)">UP</a></td></tr>
  </tbody>
</table>

Если у вас есть таблица, похожая на другой ответ, вы можете просто удалить один из вызовов .parent (), и он сделает то же самое.

0 голосов
/ 17 февраля 2018
$('.upArrow').livequery('click', function () {
        var row = $(this).closest('tr');
        var prev = row.prev();
        if (prev.length == 1) {
                row.detach();
                prev.before(row);
        }
    });
    $('.downArrow').livequery('click', function () {
        var row = $(this).closest('tr');
        var next = row.next('tr');
        if (next.length == 1) {
            row.detach();
            next.after(row);
        }
    });
0 голосов
/ 06 февраля 2009

Вы должны иметь возможность сделать это с помощью нескольких простых селекторов jQuery, захватить событие щелчка по стрелкам и использовать селекторы, чтобы получить следующий / предыдущий элемент и поменять их местами.

Затем используйте селектор для получения идентификатора каждой строки, однако вы сохраняете это - можно было бы идентифицировать каждую строку идентификатором установки на tr, чтобы сделать выбор легким. Примеры селекторов здесь и сохраняют их в cookie, опять же, просто JS для этого здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...