3

次のHTMLに近いHTMLテーブル（＃view-page-table）があります。

<table id="view-page-table">
    <thead>
        <th>Header1</th>
        <th>Header2</th>
    </thead>
    <tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>

        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>

        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
    </tbody>
</table>

私のjQueryは今のところ単純です：

function reOrder() {
    $("#view-page-table tbody").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        }
    }).disableSelection();
}

正常に動作しているようです（ヘルパー機能は、移動中にセルの幅を維持することです）。唯一の問題は、一度に2つ移動する必要が<tr>あるということです。つまり、ユーザーは1行だけをドラッグすることなく、グループ1、2、または3のすべてをドラッグする必要があります。テーブルにdivを追加しようとしましたが、それはノーノーだと思います。

4

3 に答える 3

6

私には解決策があると思いますが、最適ではありません。中にテーブルを作ってみてください

<tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>
</tbody>
<tbody>
        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>
</tbody>
<tbody>
        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
</tbody>

そして、スクリプトをこれに置き換えます

function reOrder() {
    $("#view-page-table").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        },
        handle: "tbody"
    }).disableSelection();
}

幸運を祈ります

于 2012-12-30T16:59:00.240 に答える
2

関連する行を独自のtbodyタグでラップしてみてください。1つのテーブルで複数のtbodyタグを使用できます。これは理想的なユースケースです。

于 2012-12-30T16:51:30.410 に答える
1

AhmedAssafソリューションは次のように変更する必要があります

HTMLコード

<table id="sort" border="1" width="500">  
    <thead>  
    <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>  
    </thead>  
    <tbody class="red">
            <tr><td>Group 1</td><td>Group 1</td><td>Group 1</td></tr>
            <tr><td>Group 1</td><td>Group 1</td><td>Group 1</td></tr>
    </tbody>                                    
    <tbody>                                     
            <tr><td>Group 2</td><td>Group 2</td><td>Group 2</td></tr>
            <tr><td>Group 2</td><td colspan="2">Group 2 and Group 2</td></tr>
    </tbody>                                    
    <tbody class="blue">                                     
            <tr><td>Group 3</td><td>Group 3</td><td>Group 3</td></tr>
            <tr><td>Group 3</td><td>Group 4</td><td>Group 4</td></tr>
    </tbody>
</table>

スクリプトコード

// Return a helper with preserved width of cells  
var fixHelper = function(e, ui) {  
  ui.children().children().each(function() { 
    $(this).width($(this).width()); 
  });  
  return ui;  
};

$("#sort").sortable({
        helper: fixHelper,
        items: "tbody"
    }).disableSelection();

fixHelper関数のコード行

ui.children（）。each（function（）
に置き換える必要があります
ui.children（）。children（）。each（function（）
TD幅の値をキャッチします。

そしてライン

ハンドル：「tbody」
に置き換える必要があります
アイテム：「tbody」
彼のコメントでrlanvinによって示しています

jsfiddleのデモ

よろしくNexusFred

于 2016-08-24T11:03:12.860 に答える