Jquery có thể sắp xếp ('serialize')

Question

Có thể lấy danh sách các mục từ serial trong jquery bằng cách gọi trực tiếp phương thức serialize thay vì sử dụng gọi lại không? Đoạn mã:

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

category_links_list_3 là id của UL

Cấu trúc DOM là:

<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> 

Thanks ...

Answer 1

Cuối cùng tôi đã có câu trả lời! Bạn cần phải thực hiện các UL có thể phân loại đầu tiên trước khi gọi phương thức sắp đặt vào nó:

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

Lần này linkOrderData chứa category_link [] = 8 & category_link [] = 9

Answer 2

Nếu serialize trả về một chuỗi rỗng , đảm bảo thuộc tính id bao gồm dấu gạch dưới. Chúng phải ở dạng: "set_number" Ví dụ: danh sách 3 phần tử có thuộc tính id foo_1, foo_5, foo_2 sẽ tuần tự thành foo [] = 1 & foo [] = 5 & foo [] = 2. Bạn có thể sử dụng dấu gạch dưới, dấu bằng hoặc dấu gạch ngang để tách tập hợp và số. Ví dụ: foo = 1 hoặc foo-1 hoặc foo_1 tất cả serialize thành foo [] = 1.

ở trên một ví dụ. tôi đã sử dụng nó. đó là lý do tại sao. tôi đã thấy 2 bạn.

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

di chuyển sẽ giúp bạn.

Answer 3

var formStr = $ ('# container'). Serialize()

Nhập: Điều đó sẽ hoạt động đối với các phần tử biểu mẫu. Bạn cũng có thể cuộn theo thứ tự của riêng bạn như sau:

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

tôi đã có thể làm cho hàm này hoạt động bằng cách chia nhỏ. Nếu bạn có nhiều dấu gạch dưới trong lớp của mình, bạn có thể cần điều chỉnh chỉ mục

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

Bài đăng này rất hữu ích. Trong trường hợp bạn đang tìm kiếm trợ giúp thêm, dưới đây là cách tôi làm cho nó hoạt động (sử dụng haml-ray). Sử dụng hàm toArray hơi khác một chút. Nếu sử dụng `serialize' bạn sẽ phải thiết lập các thuộc tính, một lần nữa, như 'dữ liệu item =" data-item _ # {id}'.

Cảm ơn bạn, Internet, cho biết rất nhiều các giải pháp lập trình.

: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