jQuery UI：sortable('toArray') 返回一个空数组

Posted 2023-02-24

【中文标题】jQuery UI：sortable(\'toArray\') 返回一个空数组

【英文标题】：jQuery UI: sortable('toArray') returns an empty arrayjQuery UI：sortable('toArray') 返回一个空数组

【发布时间】：2010-12-12 09:22:49

【问题描述】：

这让我很难过。下面的代码返回",,,,,,":

<script type="text/javascript">
$(function() 
    $('#listB').sortable(
        connectWith: '#listA',
        update: function(event, ui) 
            var result = $(this).sortable('toArray');
            alert(result);
            
    );
    $('#listA').sortable(
        connectWith: '#listB'
    );
);
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

为什么？！它快把我逼疯了！有什么建议吗？

【问题讨论】：

第二个答案是人们在寻找什么。

【参考方案1】：

我看到了一些纯 JavaScript 的答案。他们工作，但要注意，他们可能不会按照屏幕上可见的顺序返回项目。使用下面的代码，参见上面的 jtsalva，将以正确的排序顺序返回项目。这让我有一阵子难住了，因为我想将新订单保存到数据库中，这样我就可以在有人离开的地方重新加载网格。

var result = $(this).sortable('toArray', attribute: 'value');

【参考方案2】：

要使用另一个属性，您可以这样做：

$('#element').sortable('toArray' attribute: 'value')

这将使它现在使用代码中的属性“值”。

Documentation on Sortable toArray method

【参考方案3】：

$('.sortable').sortable('toArray'); 只会解析 sortable 类的第一个元素。您可以使用 each 解析所有元素：

$('.sortable').each(function()
    result.push($(this).sortable('toArray'));
)

【参考方案4】：

如果 serialize 返回一个空字符串，请确保 id 属性包含下划线。它们必须采用以下形式：“set_number” 例如，具有 id 属性“foo_1”、“foo_5”、“foo_2”的 3 元素列表将序列化为“foo[]=1&foo[]=5&foo[]=2”。您可以使用下划线、等号或连字符来分隔集合和数字。例如“foo=1”、“foo-1”和“foo_1”都序列化为“foo[]=1”。

jq sortable reference

【参考方案5】：

我也遇到了这个问题，除了我的元素上确实有 id，jQuery 的 sortable('toArray') 在返回 id 时非常失败，但是您可以使用以下方法在 javascript 中获取它们：

function getSortOrder() 
    var children = document.getElementById('sortedElement').childNodes;
    var sort = "";
    for (x in children) 
        sort = sort + children[x].id + ",";
    
    return sort;

这当然会以逗号分隔的字符串返回 ID，但您可以返回数组。 我确信有更好的方法来解决这个问题，这只是我找到的解决方案。

【参考方案6】：

您可以像这样定义要获取的属性：

var result = $(this).sortable('toArray', attribute: 'value');

【参考方案7】：

.sortable('toArray') 将项目Ids 序列化为数组，而你的项目没有 Id，这就是你有空字符串的原因。