HTML拖放排序表

Question

曾經想要一個HTML拖放排序表，您可以在其中排序行和列？我知道這是我會爲之而死的。有很多可排序的列表，但找到一個可排序的表似乎是不可能找到的。

我知道你可以非常接近script.aculo.us提供的工具，但我遇到了一些跨瀏覽器的問題。

Answer 1

我在過去使用dhtmlxGrid。除此之外，它還支持拖放行/列，客戶端排序（字符串，整數，日期，自定義）和多瀏覽器支持。

對評論的迴應： 不，沒有發現更好的東西 - 剛剛從該項目中移除。 :-)

Answer 2

sorttable怎麼樣？這似乎很適合你的要求。

它使用起來相當簡單 - 加載可排序的Javascript文件，然後，對於您希望它可以排序的每個表，應用class =「sortable」到<表>標記。

它會立即理解如何對大多數類型的數據進行排序，但如果有些事情沒有，您可以添加自定義排序鍵來告訴它如何排序。文檔解釋得非常好。

Answer 3

我建議Sortables在jQuery。你可以在列表項目或幾乎任何東西上使用它，包括表格。

jQuery是非常跨瀏覽器友好的，我一直推薦它。

Answer 4

如果您不介意Java，GWT有一個非常方便的庫，名爲GWT-DND，您可以查看在線演示，瞭解其功能如何強大。

Answer 5

大多數框架（Yui，MooTools，jQuery，Prototype/Scriptaculous等）都有可排序的列表功能。對每一項進行一點研究，然後選出最適合您的需求。

Answer 6

我用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的序列化版本的網址給出。這個函數（在我的情況下是PHP）然後更新數據庫中的項目訂單。

Answer 7

David Heggie的回答對我來說是最有用的。它可以稍微更簡潔：

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

適用於我，具有相同的標記。

Answer 8

如果您發現。序列化（）在大衛赫吉的溶液返回null然後設置id值作爲紅素爲「ID_1」，而不是簡單地「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」之外的其他任何單詞。