Drap-n-drop столбцы таблицы HTML (не строки) - PullRequest
Новая
       13

Drap-n-drop столбцы таблицы HTML (не строки)

0 голосов
/ 10 июня 2010

Я нашел перетаскиваемый http://www.danvk.org/wp/dragtable/, но мне нужно решение на основе Jquery. Может быть, я что-то упустил?

Ответы [ 3 ]

1 голос
/ 10 июня 2010

Плагин jqGrid (последние версии на github repo ) имеет возможность переупорядочивать столбцы - документация здесь . Однако он не поддерживает перетаскивание для изменения порядка столбцов.

Вот пользовательский рабочий образец перетаскиваемых столбцов таблицы, использующих только jQuery и jQuery UI сортируемое взаимодействие . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery-ui-1.8.1.custom.css">

    <style type="text/css">
        th
        {
            background-color: #e0e0e0;
            cursor: pointer;
        }
        .ui-state-highlight
        {
            height: 1.5em;
            line-height: 1.2em;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            var $table1 = $('#table1');
            var $table1Thead = $table1.find('thead');
            var $table1Tbody = $table1.find('tbody');

            var maxCols = 10;
            var maxRows = 50;

            // populate fake data
            for (var i = 1; i <= maxCols; i++) {
                $table1Thead.append('<th id="column' + i + '">column ' + i + '</th>');
            }
            var rowHtml;
            for (var x = 1; x <= maxRows; x++) {
                rowHtml = '<tr>';
                for (var i = 1; i <= maxCols; i++) {
                    //rowHtml += '<td>row ' + x + ', column ' + i + '</td>';
                    rowHtml += '<td>column ' + i + '</td>';
                }
                rowHtml += '</tr>';
                $table1Tbody.append(rowHtml);
            }

            // set an index helper on each th element
            $table1Thead.find('th').each(function() {
                var thElement = $(this);
                thElement.data('columnIndex', $table1Thead.find('th').index(thElement));
            });

            $table1Thead.sortable({
                items: 'th',
                containment: 'parent',
                helper: 'clone',
                placeholder: 'ui-state-highlight',
                update: function(event, ui) {
                    var prevPos = ui.item.data('columnIndex');
                    var newPos = $table1Thead.find('th').index(ui.item);

                    // adjust all the row elements
                    $table1Tbody.find('tr').find('td:eq(' + prevPos + ')').each(function() {
                        var tdElement = $(this);
                        var tdElementParent = tdElement.parent();
                        tdElement.remove();

                        tdElementParent.find('td:eq(' + newPos + ')').before(tdElement);                        
                    });

                    // re-set an helper indexes
                    $table1Thead.find('th').each(function() {
                        var thElement = $(this);
                        thElement.data('columnIndex', $table1Thead.find('th').index(thElement));
                    });
                }
            });
        });
    </script>
</head>
<body>
    <table id="table1">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>
1 голос
/ 23 мая 2013

Другой подход к переупорядочению столбцов с помощью Jquery UI Сортируемый: http://jsfiddle.net/pg7wH/

Требуется

  • jQuery (протестировано с 1.7.2 - 2.0)
  • jQuery UI(протестировано с 1.8.18 - 1.10.2)

HTML: 

<button id="getSorting">Get sorting</button><input id="showSorting" />
<table id="table1">
    <thead class="ui-state-default"></thead>
    <tbody></tbody>
</table>

JS: 

$(function() {
    var $table1 = $('#table1');
    var $table1Thead = $table1.find('thead');
    var $table1Tbody = $table1.find('tbody');
    var startPos;
    var oldPos;

    // populate fake data
    var maxCols = 10;
    var maxRows = 50;
    for (var i = 1; i <= maxCols; i++) {
        $table1Thead.append('<th sort="' + i + '" id="column[' + i + ']">column ' + i + '</th>');
    }
    var rowHtml;
    for (var x = 1; x <= maxRows; x++) {
        rowHtml = '<tr>';
        for (var i = 1; i <= maxCols; i++) {
            //rowHtml += '<td>' + i + ' - ' + x + '</td>';
            rowHtml += '<td>col ' + i + '</td>';
        }
        rowHtml += '</tr>';
        $table1Tbody.append(rowHtml);
    }

    // Show sorting
    $("button#getSorting").click(function() {
        $('#showSorting').val($table1Thead.sortable('toArray', { attribute: "sort" } ))
        console.log($table1Thead.sortable('toArray', { attribute: "sort" } ))
    })

    // The sorting
    $table1Thead.sortable({
        axis: "x" ,
        items: 'th',
        containment: 'parent',
        cursor: 'move',
        helper: 'clone',
        distance: 5,
        opacity: 0.5,
        placeholder: 'ui-state-highlight',
        start: function(event, ui) {
            startPos = $table1Thead.find('th').index(ui.item);
            oldPos = startPos;
        },
        change: function(event, ui) {            
            // Get position of the placeholder
            var newPos = $table1Thead.find('th').index($table1Thead.find('th.ui-state-highlight'));

            // If the position is right of the original position, substract it by one in cause of the hidden th
            if(newPos>startPos)newPos--;

            // move all the row elements
            //console.log('Move: 'oldPos+' -> '+newPos);
            $table1Tbody.find('tr').find('td:eq(' + oldPos + ')').each(function() {
                var tdElement = $(this);
                var tdElementParent = tdElement.parent();
                if(newPos>oldPos)// Move it the right
                    tdElementParent.find('td:eq(' + newPos + ')').after(tdElement); 
                else// Move it the left
                    tdElementParent.find('td:eq(' + newPos + ')').before(tdElement); 
            });
            oldPos = newPos;
        }
    });
});

Спасибо Нейту Пинчоту за его пример.

1 голос
/ 10 июня 2010

Этот JavaScript делает перетаскивание по столбцам.Поскольку он не использует какой-либо фреймворк, вы можете легко комбинировать его с любым другим фреймворком.

Зачем вам решение на основе jQuery, когда вы можете иметь его без необходимости использования конкретной фреймворк.

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

Нет похожих вопросов

...