Переупорядочить столбцы таблицы? - PullRequest
Новая
       8

Переупорядочить столбцы таблицы?

11 голосов
/ 20 июля 2011

Кто-нибудь знает способ переупорядочить столбцы таблицы, используя jQuery?

Я не имею в виду сортировку - я имею в виду динамическое перемещение целых столбцов влево или вправо в таблице.

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

Ответы [ 4 ]

10 голосов
/ 20 июля 2011

Идея состоит в том, чтобы пройтись по всем строкам (tr) таблицы и поменять местами нужные тд. Давайте поменяем местами столбец 2 и столбец 4: 

$('table tr').each(function() {
    var tr = $(this);
    var td1 = tr.find('td:eq(1)'); // indices are zero-based here
    var td2 = tr.find('td:eq(3)');
    td1.detach().insertAfter(td2);
});

Надеюсь, это поможет.

3 голосов
/ 20 июля 2011

Этот код должен работать для вас. 

$("table tr").each(function () {
    $(this).find("td").eq(1).after($(this).find("td").eq(0));
});

Редактировать: Если вы назначите $ (this) .find ("td") переменной, это даст лучшую производительность.Но контекст был до одного тр.Поэтому я предположил, что этого будет достаточно, чтобы дать идею. 
$("table tr").each(function () {
    var rows = $(this).find("td");
    rows.eq(1).after(rows.eq(0));
});
2 голосов
/ 20 июля 2011

Читая исходный код плагина dragtable, автор упоминает, что алгоритм фактического перемещения столбцов таблицы возник из обсуждения в группе новостей comp.lang.javascript.Это обсуждение здесь: Перестановка столбцов таблицы .

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

Это не jQuery (большинство постеров на cljs категорически не любят его и большинства других фреймворков JS), и, следовательно, это код, который вы можете адаптировать к вашим потребностям, а затем включить куда угодно.

1 голос
/ 20 января 2014

Я объединил его с jQueryUI, чтобы получить отличное действие перетаскивания: 

(function() {
    var local = {};
    local.containment = 'parent';
    local.revert = true;
    $('body thead th').draggable(local);
    $('body thead th').droppable({
        drop: dropZone
    });
    function dropZone(myEvent, myUI ) {
        var head = {};

        head.dragIndex = myUI.draggable.index();
        head.dropIndex = $(this).index();
        head.rows = $(this).closest('thead').find('tr');
        head.cellIndex = head.rows.find('th').length-1;
        head.rows.each(processTableHeaderRows);

        function processTableHeaderRows(index, element) {
            var row = {}

            row.tr = $(element);
            row.drag = row.tr.find('th:eq(' + head.dragIndex + ')');
            row.drop = row.tr.find('th:eq(' + head.dropIndex + ')');
            if (head.dropIndex === head.cellIndex) {
                row.drag.detach().insertAfter(row.drop);
            } else {
                row.drag.detach().insertBefore(row.drop);
            }
        }
        // Same thing here for td instead of th
        $(this).closest('table').find('tbody > tr').each(processRows);
        function processRows(index, element) {
            var row = {};

            row.tr = $(element);
            row.drag = row.tr.find('td:eq(' + head.dragIndex + ')');
            row.drop = row.tr.find('td:eq(' + head.dropIndex + ')');
            if (head.dropIndex === head.cellIndex) {
                row.drag.detach().insertAfter(row.drop);
            } else {
                row.drag.detach().insertBefore(row.drop);
            }
        }
    }
})();

Пытался заставить его работать в jsFiddle , но я не смог. Работает на мой сайт хотя!

...