在可排序的UI中製作表格行以向上移動

我正在使用可排序的jQuery UI來允許用戶拖放表格行。這允許用戶根據他們的偏好對錶格中的項目進行排名。一旦用戶完成了列表的排序，他們按下一個執行Ajax調用的保存按鈕。新的等級保存到數據庫中，並且表格簡要地突出顯示。在可排序的UI中製作表格行以向上移動

我現在已經添加了一個額外的按鈕，將直接發送一個項目到列表的頂部。這也是ajax。它工作得很好，除了我想添加一個轉換效果，其中<tr>將脫離並拖動到表的頂部，並向下推動下面的行。這可能嗎？下面是我使用的代碼：

該代碼處理調用從「拖和拖放」功能將更改保存到數據庫中：

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

下面的代碼是新的「發-item-to-top「按鈕，我添加了。這是當我想過渡發生時：

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

來源

2010-10-22 Mohamad

也許這會更容易使用一個列表。或者你可以檢查（像Firebug的東西）當你拖動一個項目時，jQuery UI會做什麼。然後使用jQuery UI的相同方式來讓你轉換 – 2011-01-13 20:06:50

我想我讀了一個地方，它是更難以添加錶行到現有的表。它與某些瀏覽器爲您添加tbody標記有關，並且其他瀏覽器不喜歡沒有包裹它的表標記的tr標記。

如果可能，你可以將你的表格轉換爲div（或可能lis），那麼我認爲你可以解決這個問題。我認爲jQueryUI的可拖動有這個限制，不知道。

如果不能移開表格，您可能會隱藏該行，然後立即將行移動到位置，然後創建一個看起來就像它一樣的div，然後移動它，然後在動畫結束後停止動畫div並顯示新的行。

hth

來源

2011-01-28 14:22:48 changokun

在可排序的UI中製作表格行以向上移動

回答

相關問題