在可排序的UI中使表格行动画向上运动 [英] Making a table row animate upward movement in sortable UI

问题描述

我正在使用Sortable jQuery UI，以允许用户拖放表行.这使用户可以根据自己的偏好对表中的项目进行排名.用户完成对列表的订购后，他们将按保存按钮以执行Ajax调用.新排名将保存到数据库中，并且该表将突出显示.

I'm using Sortable jQuery UI to allow users to drag and drop table rows. This allows users to rank items in a table based on their preference. Once a user has finished ordering his list, they press a save button which executes an Ajax call. The new rank is saved into the database and the table highlights briefly.

我现在添加了一个附加按钮，该按钮会将一个项目直接发送到列表的顶部.它也是ajax.它工作得很好，除了我想添加一个过渡效果，其中<tr>将断开并拖拽到表格的顶部，然后将下面的行向下推.这可能吗?这是我正在使用的代码:

I have now added an additional button that will send an item straight to the top of the list. It's also ajax. It works very well except that I would like to add a transition effect where by the <tr> will break away and drag itself to the top of the table, and push the following rows down. Is this possible? Here is the code I'm using:

此代码处理通过拖放"功能将更改保存到数据库的调用:

This code handles the call to save changes to the database from the "drag-and-drop" feature:

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

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

The following code is the new "send-item-to-top" button I added. This is when I would like the transition to happen:

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

推荐答案

我认为我读过某个地方，将表行添加到现有表中比较困难.这与某些浏览器为您添加tbody标签有关，而其他浏览器不喜欢tr标签，而tr标签中没有包装表标签(例如).

i think i read somewhere that it is more difficult to add table rows to an existing table. it had something to do with some browsers adding a tbody tag for you and other browsers not liking a tr tag that doesn't have a table tag wrapped around it (ie).

如果可能，您可以将表转换为div(或可能是lis)，那么我认为您可以解决这个问题.我认为jQueryUI的可拖动对象有此限制，不确定.

if possible, you could convert your table to divs (or possibly lis) then i think you could get around this issue. i think jQueryUI's draggable has this limitation, not sure.

如果无法从表中移开，则可以隐藏行，然后立即将行移至位置，并创建一个看起来像它的div并四处移动，然后在动画之后杀死动画div并显示新行.

if moving away from tables is not possible, you can probably hide the row, then instantaneously move the row to position, and create a div that looks just like it and move that around, then after the animation you kill the animation div and show the new row.

hth

这篇关于在可排序的UI中使表格行动画向上运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！