0

我有多个<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);

这就是我序列化数据的方式（在另一个线程上找到了这个例子）

我需要列的 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

所以 'menu1, menu2 ...' 是列 ID，id_1, id_2 是行 ID。当然，我需要知道放在哪里<li>，我通过提取 [] 之间的数字来做到这一点。

所以我的问题是如何提取我提到的所有相关信息，以便我可以将这些信息发送到数据库。

4

1 回答 1

0

如果你序列化成这样的东西会更容易使用；位置只是 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])
    }
}
于 2013-10-02T16:37:02.880 回答