Question

我正在使用Sortable jQuery UI来允许用户拖放表行。这允许用户根据他们的偏好对表中的项进行排名。一旦用户完成了他的列表的订购，他们就会按下一个执行Ajax调用的保存按钮。新等级将保存到数据库中，表格会略微突出显示。

我现在添加了一个额外的按钮，可以直接将项目发送到列表顶部。它也是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);
            } 
        });
}

以下代码是我添加的新“发送项目到顶部”按钮。这是我希望转变发生的时间：

<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

我想我在某处读到将表行添加到现有表中更加困难。它与某些浏览器有关，为你和其他浏览器添加一个tbody标签，而不喜欢没有包裹表标签的tr标签（即）。

如果可能的话，你可以将你的表转换为div（或可能是lis）然后我认为你可以解决这个问题。我认为jQueryUI的draggable有这个限制，不确定。

如果离开桌子是不可能的，你可以隐藏行，然后立即将行移动到位置，并创建一个看起来就像它的div并移动它，然后在动画后你杀死动画div并显示新行。

HTH

在可排序的UI中使表行动画向上移动

1 个答案: