JQuery UI Sortable：包含行集的表？

我有一個HTML表（＃視圖頁表）密切以下HTML：JQuery UI Sortable：包含行集的表？

<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(); 
}

這似乎很好地工作（在輔助功能是在移動時保持單元寬度）。唯一的問題是，我需要一次移動兩個<tr>。換句話說，用戶需要拖動第一組，第二組或第三組，而不能拖動一行。我試圖在表格中添加一個div，但我想這是一個禁忌。

來源

2012-12-30 Nathan

我認爲我有解決方案，但不是最佳。儘量讓TABEL內

<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-30 16:59:00

上面的代碼不適合我，我不得不用'items：「tbody」'來代替'handle：「tobdy」'。否則，非常好的解決方案！ – rlanvin

感謝您的回答。使用類似的東西，我取得了技術上的正確結果，但是卻遇到了極端的格式問題。我最終放棄了我的努力，並回顧了我是如何完全解決問題的。謝謝。 – Nathan

嘗試在相應的行中包裝自己的tbody標記。您可以在單個表格中使用多個tbody標籤。這是一個理想的用例。

來源

2012-12-30 16:51:30 ventaur

真棒答案已表示由rlanvin！不知道這是可能的！ – Magnus

艾哈邁德·阿薩夫解決方案需要作如下修改

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寬度值。

併線

handle: "tbody"

需要與

items: "tbody"

被替換他的評論

Demo on jsfiddle

最佳方面 NexusFred

來源

2016-08-24 11:03:12

哪個jquery-ui版本需要設置助手參數？對於我param'ui'給出錯誤 –

對不起。在這個演示中，我使用了JQuery UI 1.11.4。 –

JQuery UI Sortable：包含行集的表？

回答

相關問題