Giao diện người dùng jQuery: có thể sắp xếp ('toArray') trả về một mảng trống

Question

Điều này khiến tôi bối rối. Mã sau trả về ",,,,,,":

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

Tại sao ?! Nó khiến tôi như phát điên! Bất kỳ đề xuất?

Answer 1

.sortable('toArray') nối tiếp các mục Ids thành mảng và các mục của bạn không có Id, đó là lý do tại sao bạn có chuỗi trống.

Answer 2

Tôi đã có vấn đề này cũng trừ tôi đã có id trên các yếu tố của tôi, có thể phân loại của jQuery ('toArray') đã rất nhấn một bỏ lỡ khi trở về id, tuy nhiên bạn có thể lấy chúng trong javascript sử dụng này:

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

Điều này tất nhiên sẽ trả về ID trong một chuỗi phân tách bằng dấu phẩy nhưng bạn có thể trả về mảng. Tôi chắc chắn có một cách tốt hơn để giải quyết vấn đề này, đây chỉ là giải pháp tôi tìm thấy.

Answer 3

Bạn có thể xác định những thuộc tính để lấy như thế này:

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

Answer 4

Nếu serialize trả về một chuỗi rỗng, đảm bảo các 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ự hóa 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", "foo-1" và "foo_1" tất cả serialize thành "foo [] = 1".

jq sortable reference

Answer 5

$ ('sắp xếp. ') Sắp xếp được (' toArray.'); sẽ chỉ phân tích cú pháp phần tử đầu tiên của lớp có thể sắp xếp. Bạn có thể phân tích tất cả các yếu tố bằng cách sử dụng mỗi:

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

Answer 6

Để sử dụng thuộc tính khác, bạn có thể làm điều này:

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

này sẽ làm cho nó để nó bây giờ sử dụng thuộc tính 'giá trị' từ ma cua ban.

Documentation on Sortable toArray method

Answer 7

Tôi thấy một vài câu trả lời hoàn toàn là javascript. Họ làm việc nhưng hãy cẩn thận, họ có thể không trả lại các mục theo thứ tự hiển thị trên màn hình. Sử dụng mã bên dưới, xem jtsalva ở trên, sẽ trả về các mục theo thứ tự được sắp xếp thích hợp. Điều này đã khiến tôi bối rối một lúc vì tôi muốn lưu thứ tự mới vào một cơ sở dữ liệu, vì vậy tôi có thể tải lại lưới nơi người nào đó rời đi.

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