Question

我正在使用jQuery UI Tabs小部件，并希望实现拖放重新排序。我在每个选项卡上都有一个“显示等级”值，用于确定显示它们的顺序。我需要能够在重新排序时保存这些选项卡的顺序，所以我需要做一些AJAX。

你能给我一个关于如何实现这个目标的简短教程吗？或者给我一个教程，解释如何做到这一点？

Answer 1

实际上非常简单。首先，选择.ui-tabs-nav并告诉它们在x轴上可排序。然后，您可以序列化Tab键顺序。然后通过AJAX调用将该数据发送到您的应用程序。

$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
    axis: 'x',
    update: function(event, ui){
        var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
        $.ajax({
            url: '/events/update-tab-order',
            data: data,
            type: 'POST',
            mode: 'abort'
        });
    }
});

唯一棘手的部分是您必须以groupname_identifier的格式在列表项上指定ID。例如：

<div id="TabContainer">
    <ul>
        <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
        <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
        ...etc
    </ul>
    ...tab content goes here
</div>

然后，当您的应用程序收到POST数据时，它将是一个如下所示的数组：

$_POST['MyTabs']

array(
    0 => '123',
    1 => '124'
)

Answer 2

您可以尝试添加jQuery UI Sortable，如下所示：

$(".list").sortable({
    handle: ".sortableHandle", // Selector for the element that is dragable
    update: function (event, ui)
    {
        // Update the sort of the list via AJAX
        var IdArray = "";
        $(".sortable tr").each(function ()
        {
            IdArray += $(this).attr("id").split("sortList_")[1] + ","; // the tr has an id with this format: "sortList_ID"
        });

        $.ajax(
                {
                    url: "UpdateListSorting.html",
                    data: { "listSorting": IdArray },
                    type: "POST",
                    mode: "abort"
                });
    }
});

'mode：'abort“'是ajax调用的扩展名：http://www.onemoretake.com/2009/10/11/ajaxqueue-and-jquery-1-3/

这会中止以前的调用，只保留当前调用，因为不需要保存过时的排序。

jQuery UI选项卡：如何实现拖放AJAX重新排序？

2 个答案: