ansaurus

Question

Drap-n-drop HTML table columns (not rows)

Answer 1

+1 A:

This JavaScript does drag-and-drop on columns. As it doesn't uses any framework you can combine it easily with any other framework.

Why do you nee a jQuery based solution when you can have one without the need of a specific framwork.

Kau-Boy 2010-06-10 14:41:52

I will need to customize it in the future, so I'd like to stick with JQuery\JQuery UI for consistence.

artvolk 2010-06-11 14:45:34

Answer 2

A:

How about the YUI DataTable? It has nice features and plays generally nicely with jQuery.

Chris Farmer 2010-06-10 14:45:01

Answer 3

+1 A:

The plugin jqGrid (latest versions at github repo) has a feature to re-order columns - the documentation is here. It does not appear to have drag/drop support for re-ordering columns however.

Here is a custom working sample of draggable table columns using only jQuery and jQuery UI sortable interaction.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<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>

Nate Pinchot 2010-06-10 16:06:19

The solution is not fully working in my case, but I get the idea. May be one will need this fix too: http://dev.jqueryui.com/ticket/4825

artvolk 2010-06-12 06:18:18

ansaurus

tags:

views:

answers:

Drap-n-drop HTML table columns (not rows)

related questions