相关疑难解决方法(0)

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

我正在使用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);
            } 
        });
}
Run Code Online (Sandbox Code Playgroud)

以下代码是我添加的新"发送项目到顶部"按钮.这是我希望过渡发生的时间:

<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;">
Run Code Online (Sandbox Code Playgroud)

jquery

6
推荐指数
1
解决办法
5875
查看次数

标签 统计

jquery ×1