Jquery sortable ('serialize')

Question

콜백을 사용하는 대신 serialize 메서드를 직접 호출하여 jquery의 UL에서 항목의 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> 

감사합니다 ...

Answer 1

나는 결국 대답을 얻었다! 당신은 그것에 직렬화 메소드 호출하기 전에 UL이 정렬 먼저 확인해야합니다 :

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

이 시간을 linkOrderData는 category_link [] = 8 & category_link는 [] = 9

Answer 2

직렬화가 빈 문자열을 반환하는 경우 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로 직렬화됩니다.

위의 예는 하나의 예입니다. 내가 사용 했어. 그게 왜. 나는 너 2 명을 봤어.

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

당신이 도움을 될 migth.

Answer 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'))) 

Answer 4

내가 할 수 있었다 포함 분할을 사용하여이 기능을 작동 시키십시오. 수업에 여러 개의 밑줄이있는 경우 색인을 조정해야 할 수도 있습니다.

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 
} 

Answer 5

이 게시물은 매우 유용했습니다. 도움이 필요하시면 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