2009-12-24 78 views
8

是否有可能通过直接调用serialize方法而不是使用回调从jquery中的UL获取序列化的项目列表?代码片段:jquery sortable('serialize')

var sortableLinks = $("#category_links_list_3"); 
var linkOrderData = $(sortableLinks).sortable('serialize'); 

category_links_list_3是UL

DOM结构的ID是:

<div class="hidden" id="inline_list_3"> 
    <ul class="category_links_list ui-sortable" id="category_links_list_3"> 
     <li class="link_title ui-state-default" id="category_link_8">Coconut Oil</li> 
     <li class="link_title ui-state-default" id="category_link_9">Hempseed</li> 
    </ul> 
</div> 

谢谢...

回答

21

我终于得到了答案!你需要调用它的序列化方法之前,在UL排序第一:

var sortableLinks = $("#category_links_list_3"); 
$(sortableLinks).sortable(); 
var linkOrderData = $(sortableLinks).sortable('serialize'); 

这次linkOrderData包含category_link [] = 8 & category_link [] = 9

16

如果序列化返回一个空字符串,确保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。

以上就是一个例子。我用它。这就是为什么。我看到了你。

http://jqueryui.com/demos/sortable/#method-serialize

它migth是帮助你。

+0

我有适当的格式化的ID,我可以使用回调方法,但正如你可以从DOM结构看到的,UL是不可见的,因此不能触发事件 – KalenGi 2009-12-24 21:48:09

+0

是的,它对我也有帮助 – 2013-04-23 13:22:00

3

VAR formStr = $( '#集装箱')序列化()

补充:这将表单元素的工作。你也可以这样推出自己的序列号:

function serializeList(container) 
{ 
    var str = '' 
    var n = 0 
    var els = container.find('li') 
    for (var i = 0; i < els.length; ++i) { 
    var el = els[i] 
    var p = el.id.lastIndexOf('_') 
    if (p != -1) { 
     if (str != '') str = str + '&' 
     str = str + el.id.substring(0, p) + '[]=' + (n + 1) 
     ++n 
    } 
    } 
    return str 
} 

alert(serializeList($('#container'))) 
+0

I试试这个,它不起作用。谢谢! – KalenGi 2009-12-24 21:46:16

+0

如果没有形式的ID,你可以推出你自己的函数,如上 – jspcal 2009-12-24 22:24:02

+0

这肯定复制了序列化功能,但是我找到了方法没有返回的原因就像我在下面的答案中详细说明的那样。 – KalenGi 2009-12-24 22:37:15

1

我能使用拆分获得此功能。如果您的班级中有多个下划线,您可能需要调整索引

function serializeList(container) 
{ 
    var str = '' 
    var n = 0 
    var els = container.find('tr') 
    for (var i = 0; i < els.length; ++i) { 
    var el = els[i] 

    var p = el.id.lastIndexOf('_') 
    **var getIdNumber = el.id.split("_");** 

    if (p != -1) { 
     if (str != '') str = str + '&' 
     str = str + el.id.substring(0, p) + '[]=' + **getIdNumber[1]** 
     ++n 
    } 
    } 
    return str 
} 
+0

不错,但是你应该删除n = 0和++ n,因为它不再被使用。 – 2013-04-25 14:58:56

0

此帖子非常有帮助。如果你正在寻找额外的帮助,这是我如何工作(使用haml-rails)。使用toArray函数稍有不同。如果使用'序列化”,你就必须设置属性,再次为“数据项=“数据项_#{ID}”。

谢谢你,上网,会知道这么多的编程解决方案。

:css 
    #sortable { list-style-type: none; margin: 40 20; padding: 0; width: 500; } 
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
    #sortable li span { position: absolute; margin-left: -1.3em; } 

:javascript 
    $(function() { 

    $("#sortable").sortable({ 
     update: function(event, ui) { 
     var data = $("#sortable").sortable('toArray', {attribute: "data-item"}); 
     // return ids in order after update 
     //alert(JSON.stringify(data)); 
     $.ajax({ 
      type: "PATCH", 
      async: true, 
      url: "/calendar/update_order.json", 
      data: JSON.stringify(data), 
      dataType: 'json', 
      contentType: 'application/json', 
      error: function(data) { return false; }, 
      success: function(data) { return false; } 
     }); 
     } 
    }); 
    $("#sortable").disableSelection(); 

    }); 

#sort_tickets 
    %ul#sortable 
    - @tickets.each do |ticket| 
     %li.ui-state-default(data-item="#{ticket.id}")< 
     %span.ui-icon.ui-icon-arrowthick-2-n-s< 
     = ticket.customer