1

ヘッダーが固定され、最初の 3 列が固定されたテーブルがあります。

http://jsfiddle.net/ncUdA/embedded/result/

列をドラッグ アンド ドロップしたい (つまり、A、B、C、D、E、F は、シフト可能 (ドラッグ アンド ドロップ) を有効にする必要がある列です。その下のすべての要素も新しい位置にシフトする必要があります。

http://jsfiddle.net/ncUdA/

必要なことを行うプラグインを見つけましたが、固定ヘッダーと固定3列のコードで複数のテーブルを使用しているため、実装できませんでした。

http://johnny.github.com/jquery-sortable/#table

以下のコードは、その方法に関するプラグイン コードです。

テンプレートにハンドルバーを使用しています。

    var oldIndex
    $('.sorted_head tr').sortable({
      containerSelector: 'tr',
      itemSelector: 'th',
      placeholder: '<th class="placeholder"/>',
      vertical: false,
      onDragStart: function (item, group, _super) {
        oldIndex = item.index()
        item.appendTo(item.parent())
        _super(item)
      },
      onDrop: function  (item, container, _super) {
        var field,
        newIndex = item.index()

        if(newIndex != oldIndex)
          item.closest('table').find('tbody tr').each(function (i, row) {
            row = $(row)
            field = row.children().eq(oldIndex)
            if(newIndex)
              field.before(row.children()[newIndex])
            else
              row.prepend(field)
          })

        _super(item)
      }
    })
4

1 に答える 1

0

ドラッグアンドドロップを使用してテーブルの列を並べ替えるための解決策を見つけるためにグーグルした後。'akottr' がすばらしい jquery プラグインを作成していることがわかりました。ここ

これは、ドラッグアンドドロップを使用してテーブルの列を並べ替える機能を提供する、ライブラリに依存しない js 関数です。使い方はとても簡単です。

$('#defaultTable').dragtable();

というわけで、思い通りのリオーダーテーブルを手に入れていただきたいと思います。その他の例については、こちらをご覧ください: http://akottr.github.io/dragtable/

于 2015-07-02T10:13:11.720 に答える