Kéo và thả các bảng có thể sắp xếp HTML

Question

Bao giờ muốn có một bảng kéo và thả HTML có thể sắp xếp trong đó bạn có thể sắp xếp cả hàng và cột? Tôi biết đó là điều tôi sẽ chết. Có rất nhiều danh sách có thể sắp xếp được, nhưng việc tìm kiếm một bảng có thể sắp xếp dường như không thể tìm thấy.

Tôi biết rằng bạn có thể nhận được khá gần với các công cụ mà script.aculo.us cung cấp nhưng tôi gặp phải một số vấn đề liên quan đến trình duyệt với họ.

Answer 1

Tôi đã sử dụng dhtmlxGrid trong quá khứ. Trong số những thứ khác, nó hỗ trợ kéo và thả các hàng/cột, phân loại phía máy khách (chuỗi, số nguyên, ngày tháng, tùy chỉnh) và hỗ trợ đa trình duyệt.

Trả lời nhận xét: Không, không tìm thấy gì tốt hơn - chỉ cần chuyển từ dự án đó. :-)

Answer 2

Làm thế nào về sorttable? Điều đó dường như phù hợp với yêu cầu của bạn một cách độc đáo. Nó là khá dễ sử dụng - tải các tập tin Javascript sorttable, sau đó, cho mỗi bảng bạn muốn nó làm cho sắp xếp, áp dụng class = "sortable" để < bảng > tag.

Nó sẽ ngay lập tức hiểu cách sắp xếp hầu hết các loại dữ liệu, nhưng nếu có điều gì đó không, bạn có thể thêm khóa sắp xếp tùy chỉnh để cho biết cách sắp xếp. Các tài liệu giải thích tất cả khá tốt.

Answer 3

Tôi khuyên bạn nên Sortables trong jQuery. Bạn có thể sử dụng nó trên các mục danh sách hoặc khá nhiều thứ, kể cả các bảng.

jQuery rất thân thiện với trình duyệt và tôi luôn khuyên bạn nên sử dụng nó.

Answer 4

Nếu bạn không nhớ Java, có một thư viện rất tiện dụng cho GWT được gọi là GWT-DND xem bản demo trực tuyến để xem mức độ mạnh mẽ của nó.

Answer 5

Hầu hết các khung công tác (Yui, MooTools, jQuery, Prototype/Scriptaculous, v.v.) đều có chức năng danh sách có thể sắp xếp. Làm một ít nghiên cứu vào mỗi và chọn một trong những phù hợp với nhu cầu của bạn nhất.

Answer 6

Tôi đã sử dụng plugin có thể sắp xếp của Giao diện người dùng jQuery với kết quả tốt. Markup tương tự như sau:

<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> 

và sau đó trong 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 
      } 
     }); 
    } 
}); 

POSTS Đây là một phiên bản serialized ID của mục vào URL nhất định. Hàm này (PHP trong trường hợp của tôi) sau đó cập nhật các đơn đặt hàng của các mục trong cơ sở dữ liệu.

Answer 7

Câu trả lời của David Heggie là hữu ích nhất đối với tôi. Nó có thể ngắn gọn hơn một chút:

làm việc cho tôi, với cùng một đánh dấu.

Answer 8

Nếu bạn tìm thấy.serialize() trả về null trong giải pháp David Heggie của sau đó thiết lập các giá trị id cho TRS là 'ID_1' thay vì chỉ đơn giản là '1'

Ví dụ:

<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> 

trên sẽ serialize như "id [] = 1 & id [] = 2 & id [] = 3 "

Bạn có thể sử dụng '=', '-' hoặc '_' thay vì '_'. Và bất kỳ từ nào khác ngoài "id".