可排序（'toArray'）或可排序（'序列化'）答案

【问题标题】：Sortable('toArray') or sortable('serialize')可排序（'toArray'）或可排序（'序列化'）
【发布时间】：2012-09-16 00:14:17
【问题描述】：

我在 Stackoverflow 上阅读了一些问题，这些问题建议使用 serialize() 和 toArray 和 sortable() 来准备数据以插入数据库。但是，当我尝试将它们传递给 sortable('toArray') 或 sortable('serialize') 时，它会破坏代码，即列表不再可排序。这是一个小提琴

http://jsfiddle.net/mjmitche/sTzCS/16/

有谁知道我做错了什么？

<ul id="sortlist">
        <li id="Vancouver">Vancouver</li>
        <li id="Toronto">Toronto</li>
        <li id="Montreal">Montreal</li>
        <li id="Ottawa">Ottawa</li>
        <li id="Calgary">Calgary</li>
        <li id="Edmonton">Edmonton</li>
        <li id="Winnipeg">Winnipeg</li>
     </ul>

JavaScript

// also tried $('#sortlist').sortable('serialize);

var result = $('#sortlist').sortable("toArray");

alert(result);

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

将 li 的 id 从“Toronto”更改为“city_Toronto”等。

<ul id="sortlist">
        <li id="city_Vancouver">Vancouver</li>
        <li id="city_Toronto">Toronto</li>
        <li id="city_Montreal">Montreal</li>
        <li id="city_Ottawa">Ottawa</li>
        <li id="city_Calgary">Calgary</li>
        <li id="city_Edmonton">Edmonton</li>
        <li id="city_Winnipeg">Winnipeg</li>
     </ul>

来自jqueryui docs：

serialize 默认通过查看每个项目的 id 来工作格式“setname_number”，它会吐出一个像这样的哈希 "setname[]=number&setname[]=number"

在 jquery 代码中添加了一个额外的 .sortable() 以使 ul 可排序，如 https://stackoverflow.com/a/1959893 中所述

var result = $('#sortlist').sortable().sortable("serialize");

（分叉为http://jsfiddle.net/s8eJU/）

【讨论】：

【解决方案2】：

这是怎么做的

$("#sortlist").sortable({stop: function(event, ui) {
    result = $("#sortlist").sortable("toArray");
     alert(result.length);

}});

【讨论】：

考虑使用update 事件而不是stop 来减少开销——如果顺序没有改变，您可能不关心该事件。

【解决方案3】：

首先，你应该初始化 sortable，

$('#sortlist').sortable();

然后调用序列化。

var result = $('#sortlist').sortable("toArray");
alert(result);

Jsfiddle

【讨论】：