我有多个列<ul>可以通过jQuery UI排序。为了保存这些<ul>中的<li>位置，我需要序列化数据。
$(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);
这就是我序列化数据的方式（在另一个线程上找到此示例）
我需要列的 id 和行的 id，以便将它们保存到数据库中。
输出如下所示：menu1[0]=id_2&menu1[1]=id_1&menu2[0]=id_3&menu2[1]=id_4&menu3[0]=id_5&menu3[1]=id_6
所以"菜单 1，菜单 2 ..."是列 ID 和id_1，id_2是行 ID。当然，我需要知道把<li>放在哪里，我通过在 [] 之间提取数字来做到这一点。
所以我的问题是如何提取我提到的所有相关信息，以便我可以将这些信息发送到数据库。
如果你序列化成这样的东西会更容易使用;位置只是 items 数组中的索引。
[
{ "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])
}
}