jQuery UI Sortable - 序列化多列

我有一個小腳本，它允許我使用jQuery在3列之間很好地對div標籤進行排序。 jQuery的下面可以看到：jQuery UI Sortable - 序列化多列

$(".column").sortable(
{ connectWith: '.column' }, 
{ update: function(event, ui) { alert($(this).sortable('serialize')) } 
});

如果我從第1列項目移動到第2欄，它會顯示2級的警報，顯示了2組受影響的列序列化的數據。問題是，我也需要知道列ID，所以我最終可以將數據保存到數據庫中。現在，如果可以在警報中顯示列ID，但這足以讓我繼續。

來源

2010-06-10 oshirowanen

$(".column").sortable(
    { connectWith: '.column' }, { update: function(event, ui) { 
    alert($(this).sortable('serialize')); 
    alert($(this).parents('.column').attr(id)); 
    } 
});

我認爲應該有效。找到您移動的div的父列，然後獲取它的id屬性。

來源

2010-06-10 15:51:07 Qwibble

'this.id'獲得列ID，無需父母，attr等。 – 2010-12-08 19:16:32

得到它的工作使用「最接近」的方法：

{更新：（$（本）.closest（「格」）ATTR（「ID」））功能（事件，UI）{ 警報; alert（$（this）.sortable（'serialize'）） }

來源

2010-06-11 07:51:09 oshirowanen

剛剛解決了這個非常非常骯髒的把戲。喜歡與你分享，也許它有幫助。

<div class="column" > 
    <div class="portlet" id="portlet_1_name"> 
    <div class="portlet-header">Title1</div> 
    <div class="portlet-content">Text</div> 
    </div> 
    <div class="portlet" id="portlet_2_name"> 
    <div class="portlet-header">Title2</div> 
    <div class="portlet-content">Text</div> 
    </div> 
</div> 
<!-- for debug --> 
<div id="serial"></div>

等等

var out = ""; 

$('.portlet').each(function(index) { 
    out += $(this).attr('id') + ','; 
}); 

$("#serial").html(out); 
// or alert(out) if you like

來源

2010-07-28 20:45:23 Soliman

我一直在尋找一個好的答案，這個，沒有對這裏的人的真的是正是我想要的，所以我將分享我做的方式它：

$('ul.playerList').each(function() { 
    var id = $(this).attr('id'); // get element id 
    window[id] = $(this).sortable("serialize",{key:id}); // make global var w/ data 
}); 

// you could make this more dynamic if you have a lot of lists 
var data = ul_id_1 + "&" + ul_id_2 + "&" + ul_id_3 + "&action=other_vars"; 

$.post(url,data,function(resp) { 
    $("#test").html(resp); 
});

來源

2011-06-21 13:46:34

jQuery UI Sortable - 序列化多列

回答

相關問題