У меня есть несколько столбцов <ul>
которые сортируются с помощью jQuery UI. Чтобы сохранить позиции <li>
внутри этих <ul>
мне нужно сериализовать данные.
$(function() {
$("ul.sortable").sortable({
connectWith: '.sortable',
update: function(event, ui) {
/* var position = $('.sortable').sortable('serialize', {
key: 'menu',
connected: true
});*/
$('div').empty().html( $('.sortable').serial() );
}
});
});
(function($) {
$.fn.serial = function() {
var array = [];
var $elem = $(this);
$elem.each(function(i) {
var menu = this.id;
$('li', this).each(function(e) {
array.push( menu + '['+e+']=' + this.id );
});
});
return array.join('&');
}
})(jQuery);
Вот как я сериализую данные (нашел этот пример в другом потоке)
Мне нужен идентификатор столбца и идентификатор строки, поэтому я могу сохранить их в базе данных.
Вывод выглядит следующим образом: menu1 [0] = id_2 & menu1 [1] = id_1 & menu2 [0] = id_3 & menu2 [1] = id_4 & menu3 [0] = id_5 & menu3 [1] = id_6
Итак, "menu1, menu2..." - это идентификаторы столбцов и id_1, id_2 - идентификаторы строк. И, конечно, мне нужно знать, куда положить <li>
и я делаю это, извлекая номер между [].
Поэтому мой вопрос заключается в том, как извлечь всю соответствующую информацию, которую я упомянул, чтобы я мог отправить эту информацию в базу данных.
С этим будет проще работать, если вы сериализуете что-то вроде этого; позиция - это только индекс внутри массива элементов.
[
{ "column" : "menu1", "items" : [ "id_2", "id_1" ] },
{ "column" : "menu2", "items" : [ "id_3", "id_4" ] },
{ "column" : "menu3", "items" : [ "id_5", "id_6" ] }
]
Вы можете создать это следующим образом:
(function($) {
$.fn.serial = function() {
var menus = [];
var $elem = $(this);
$elem.each(function(i) {
var menu = this.id;
var items = [];
$('li', this).each(function(e) {
items.push( this.id );
});
menus.push({ "column" : menu, "items": items });
});
return menus;
}
})(jQuery);
и повторите его так:
for (var m = 0; m < menus.length; m++) {
var menu = menus[m];
var column = menu["column"];
var items = menu["items"];
for (var i = 0; i < items.length; i++) {
update(i, column, items[i])
}
}