Question

我找到了dragtable http://www.danvk.org/wp/dragtable/，但我需要一个基于Jquery的解决方案。可能是我错过了什么？

Answer 1

这个JavaScript会对列进行拖放操作。由于它不使用任何框架，您可以轻松地将其与任何其他框架结合使用。

为什么你需要一个基于jQuery的解决方案，而你可以在不需要特定框架的情况下使用它。

Answer 2

插件jqGrid（github repo的最新版本）具有重新排序列的功能 - the documentation is here。但是，它似乎没有重新排序列的拖放支持。

以下是仅使用jQuery和jQuery UI sortable interaction的可拖动表格列的自定义工作示例。

<!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>

Answer 3

使用Jquery UI Sortable重新排序列的另一种方法： 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;
        }
    });
});

感谢Nate Pinchot的榜样。

拖放HTML表格列（而不是行）

3 个答案: