Làm cho hàng của bảng hoạt động trở lên trong giao diện người dùng có thể sắp xếp

Question

Tôi đang sử dụng Giao diện người dùng jQuery có thể sắp xếp để cho phép người dùng kéo và thả các hàng trong bảng. Điều này cho phép người dùng xếp hạng các mục trong bảng dựa trên tùy chọn của họ. Khi người dùng đã hoàn tất việc đặt hàng danh sách của mình, họ nhấn nút lưu thực hiện cuộc gọi Ajax. Thứ hạng mới được lưu vào cơ sở dữ liệu và bảng nổi bật một thời gian ngắn.

Tôi hiện đã thêm một nút bổ sung sẽ gửi một mục thẳng lên đầu danh sách. Nó cũng là ajax. Nó hoạt động rất tốt, ngoại trừ việc tôi muốn thêm một hiệu ứng chuyển tiếp trong đó bởi <tr> sẽ tách ra và kéo chính nó lên đầu bảng và đẩy các hàng sau xuống. Điều này có thể không? Đây là mã Tôi đang sử dụng:

Mã này xử lý các cuộc gọi để lưu thay đổi cơ sở dữ liệu từ "kéo-và-thả" tính năng:

<input type="button" value="Save Queue" id="saveButton" class="list-button"> 

$(document).ready(function(){ 
    $("#sortable").sortable(); 
    $("#saveButton").click(persist); 
}); 

// Persist function (save order) 
function persist() { 
    var data = $("#sortable").sortable('toArray'); 
     $.ajax({ 
      traditional: true, 
      url: "/gz/index.cfm/membros/rankListByAjax?order="+data, 
      type: "POST", 
      success: function(msg){ 
      $("#sortable tr").effect("highlight", {}, 1000); 
      } 
     }); 
} 

Các mã sau đây là mới "gửi -nói đầu trang "tôi đã thêm. Đây là thời điểm tôi muốn quá trình chuyển đổi xảy ra:

<form ...onsubmit=" 

$.ajax({ 
dataType: 'script', 
type: 'post', 
url: '/gz/index.cfm?controller=membros&amp;action=send-item-to-top&amp;key=1082&amp;format=js&amp;modType=replace', 
data: $(this).serialize(), 
success: function(data, textStatus){$(this).attr('disabled','false');}, 
beforeSend: function(XMLHttpRequest){$(this).attr('disabled','true');}}); return false;" text="&uarr;"> 

Answer 1

tôi nghĩ rằng tôi đã đọc ở đâu đó sẽ khó khăn hơn khi thêm hàng trong bảng vào bảng hiện có. nó có một cái gì đó để làm với một số trình duyệt thêm một thẻ tbody cho bạn và các trình duyệt khác không thích một thẻ tr mà không có một thẻ bảng quấn quanh nó (tức là).

nếu có thể, bạn có thể chuyển đổi bảng thành div (hoặc có thể là lis), sau đó tôi nghĩ bạn có thể gặp phải vấn đề này. tôi nghĩ rằng jQueryUI của draggable có giới hạn này, không chắc chắn.

nếu không thể di chuyển khỏi bảng, bạn có thể ẩn hàng, sau đó di chuyển hàng đến vị trí và tạo div trông giống như nó và di chuyển xung quanh, sau khi hoạt ảnh bạn hủy hoạt ảnh div và hiển thị hàng mới.

hth