Question

HTML

<ul id="user-stream-list" class="user-stream-list ui-sortable">
    <li data-id="36" data-oid="0" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="36">Tech Crunch<span class="edit-title" style="right: 35px;">rename</span><span class="delete-title">×</span></span>
        <ul class="ui-sortable">
        </ul>
    </li>
    <li data-id="37" data-oid="1" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="37">Apple<span class="edit-title">rename</span></span>
        <ul class="ui-sortable">
            <li class="feed sub"><a data-uid="18" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider - Frontpage News</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

jquery的

$( "#user-stream-list" ).sortable({
        update : function () {
            var order = $('#user-stream-list').sortable('serialize');
            console.log(order);
            //$("#info").load("process-sortable.php?"+order);
        }
    });

DB

 id     uid     oid     cname 
 20     36       0      Tech Crunch
 21     37       1      Apple

当我重新安排以下内容时，我的console.log（）返回(an empty string)我对它没有显示任何内容的原因一无所知。 jsFiddle

我试图传递data-id和data-oid，以便在php中我可以将两个用于处理我的数据库。

Answer 1

这是因为元素的id不符合要求的格式，id应该有两个由下划线，等号或连字符分隔的部分

From Docs

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

离

<ul id="user-stream-list" class="user-stream-list ui-sortable">
    <li id="o_36" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="36">Tech Crunch<span class="edit-title" style="right: 35px;">rename</span><span class="delete-title">×</span></span>
        <ul class="ui-sortable">
        </ul>
    </li>
    <li id="o_37" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="37">Apple<span class="edit-title">rename</span></span>
        <ul class="ui-sortable">
            <li class="feed sub"><a data-uid="18" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider - Frontpage News</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

演示：Fiddle

基于更新

我认为最好在这里使用toArray选项

$("#user-stream-list").sortable({
    update: function () {
        var ids = $(this).sortable('toArray', {
            attribute : 'data-id'
        });
        console.log(ids);
        var oids = $(this).sortable('toArray', {
            attribute : 'data-oid'
        });
        console.log(oids);
        //$("#info").load("process-sortable.php?"+order);
    }
});

演示：Fiddle

jQuery sortable（一个空字符串）

1 个答案: