11

行と列の両方を並べ替えることができる HTML のドラッグ アンド ドロップで並べ替え可能なテーブルが欲しいと思ったことはありませんか? 私はそれが私が死にたいものであることを知っています。ソート可能なリストはたくさん出回っていますが、ソート可能なテーブルを見つけることは不可能のようです。

script.aculo.us が提供するツールにかなり近づくことができることは知っていますが、クロスブラウザーの問題に遭遇しました。

4

9 に答える 9

22

jQuery UIのソート可能なプラグインを使用して、良い結果が得られました。これに似たマークアップ：

<table id="myTable">
<thead>
<tr><th>ID</th><th>Name</th><th>Details</th></tr>
</thead>
<tbody class="sort">
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr>
</tbody>
</table>

そしてjavascriptで

$('.sort').sortable({
    cursor: 'move',
    axis:   'y',
    update: function(e, ui) {
        href = '/myReorderFunctionURL/';
        $(this).sortable("refresh");
        sorted = $(this).sortable("serialize", 'id');
        $.ajax({
            type:   'POST',
            url:    href,
            data:   sorted,
            success: function(msg) {
                //do something with the sorted data
            }
        });
    }
});

これにより、アイテムのIDのシリアル化されたバージョンが指定されたURLにPOSTされます。この関数（私の場合はPHP）は、データベース内のアイテムの順序を更新します。

于 2008-09-19T08:36:45.573 に答える
5

jQueryのSortablesをお勧めします。これは、リスト アイテムや、テーブルを含むほとんどすべてに使用できます。

jQuery は非常にクロス ブラウザー フレンドリーであり、常にお勧めします。

于 2008-09-17T12:03:30.197 に答える
4

過去にdhtmlxGridを使用しました。とりわけ、ドラッグ アンド ドロップの行/列、クライアント側の並べ替え (文字列、整数、日付、カスタム)、およびマルチ ブラウザーのサポートをサポートしています。

コメントへの返信: いいえ、他に良いものは見つかりませんでした - そのプロジェクトから移動しただけです。:-)

于 2008-09-17T12:53:08.953 に答える
3

デビッド・ヘギーの答えは私にとって最も役に立ちました。もう少し簡潔にすることができます。

var sort = function(event, ui) {
  var url = "/myReorderFunctionURL/" + $(this).sortable('serialize');
  $.post(url, null,null,"script");  // sortable("refresh") is automatic
}

$(".sort").sortable({
  cursor: 'move',
  axis: 'y',
  stop: sort
});

同じマークアップで、私のために動作します。

于 2008-12-12T10:50:14.257 に答える
1

ほとんどのフレームワーク (Yui、MooTools、jQuery、Prototype/Scriptaculous など) には、並べ替え可能なリスト機能があります。それぞれについて少し調べて、ニーズに最も適したものを選択してください。

于 2008-09-17T16:33:16.817 に答える
0

Java が気にならない場合は、GWT-DNDと呼ばれる GWT 用の非常に便利なライブラリがあり、オンライン デモをチェックして、その強力さを確認してください。

于 2008-09-17T12:14:51.727 に答える
0

David Heggie のソリューションで .serialize() が null を返す場合は、TR の ID 値を単に「1」ではなく「id_1」に設定します。

例：

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr>

上記は「id[]=1&id[]=2&id[]=3」としてシリアル化されます

「_」の代わりに「=」、「-」、または「_」を使用できます。そして、「id」以外の単語。

于 2012-06-21T07:07:38.083 に答える
0

私はJQuery Sortableを使用していますが、私のようにVue.jsを使用している場合は、カスタムVueディレクティブを作成してSortable機能をカプセル化するソリューションを次に示します.Vueドラッグ可能であることは認識していますが、テーブル列を問題ごとにここでこれを実際に確認するには、これを確認してください

JS コード

Vue.directive("draggable", {
  //adapted from https://codepen.io/kminek/pen/pEdmoo
  inserted: function(el, binding, a) {
    Sortable.create(el, {
      draggable: ".draggable",
      onEnd: function(e) {
        /* vnode.context is the context vue instance: "This is not documented as it's not encouraged to manipulate the vm from directives in Vue 2.0 - instead, directives should be used for low-level DOM manipulation, and higher-level stuff should be solved with components instead. But you can do this if some usecase needs this. */
        // fixme: can this be reworked to use a component?
        // https://github.com/vuejs/vue/issues/4065
        // https://forum.vuejs.org/t/how-can-i-access-the-vm-from-a-custom-directive-in-2-0/2548/3
        // https://github.com/vuejs/vue/issues/2873 "directive interface change"
        // `binding.expression` should be the name of your array from vm.data
        // set the expression like v-draggable="items"

        var clonedItems = a.context[binding.expression].filter(function(item) {
          return item;
        });
        clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);
        a.context[binding.expression] = [];
        Vue.nextTick(function() {
          a.context[binding.expression] = clonedItems;
        });

      }
    });
  }
});

const cols = [
  {name: "One", id: "one", canMove: false},
  {name: "Two", id: "two", canMove: true},
  {name: "Three", id: "three", canMove: true},
  {name: "Four", id: "four", canMove: true},
]

const rows = [
  {one: "Hi there", two: "I am so excited to test", three: "this column that actually drags and replaces", four: "another column in its place only if both can move"},
  {one: "Hi", two: "I", three: "am", four: "two"},
  {one: "Hi", two: "I", three: "am", four: "three"},
  {one: "Hi", two: "I", three: "am", four: "four"},
  {one: "Hi", two: "I", three: "am", four: "five"},
  {one: "Hi", two: "I", three: "am", four: "six"},
  {one: "Hi", two: "I", three: "am", four: "seven"}
]

Vue.component("datatable", {
  template: "#datatable",
  data() {
    return {
      cols: cols,
      rows: rows
    }
  }
})

new Vue({
  el: "#app"
})

CSS

.draggable {
  cursor: move;
}

table.table tbody td {
  white-space: nowrap;
}

パグ テンプレート HTML

#app
  datatable

script(type="text/x-template" id="datatable")
  table.table
    thead(v-draggable="cols")
      template(v-for="c in cols")
        th(:class="{draggable: c.canMove}")
          b-dropdown#ddown1.m-md-2(:text='c.name')
            b-dropdown-item First Action
            b-dropdown-item Second Action
            b-dropdown-item Third Action
            b-dropdown-divider
            b-dropdown-item Something else here...
            b-dropdown-item(disabled='') Disabled action

    tbody
      template(v-for="row in rows")
        tr
          template(v-for="(col, index) in cols")
            td {{row[col.id]}}
于 2019-02-03T07:01:12.677 に答える
-1

ソート可能はどうですか？それはあなたの要件にうまく合うように思われるでしょう。

使い方はかなり簡単です。並べ替え可能なJavascriptファイルを読み込んでから、並べ替え可能にするテーブルごとに、class="sortable"を<table>タグに適用します。

ほとんどの種類のデータを並べ替える方法はすぐに理解できますが、そうでないものがある場合は、カスタムの並べ替えキーを追加して、並べ替えの方法を指示できます。ドキュメントはそれをすべてかなりよく説明しています。

于 2008-09-17T11:52:38.817 に答える