快捷導(dǎo)航

jquery中的sortable排序之后的保存狀態(tài)的解決方法

更新時(shí)間：2010年01月28日 21:52:46 作者：

其實(shí)在前年的這個(gè)時(shí)候，我就有用過(guò)這個(gè)sortable組件，那時(shí)候搞了個(gè)個(gè)人網(wǎng)站（可惜后來(lái)關(guān)了），首頁(yè)就用到了這種拖拽的效果。

當(dāng)時(shí)也就從jquery的官方網(wǎng)站上抄了幾句搞上去，后來(lái)發(fā)現(xiàn)用處不大，還挺慢。汗～～～以至于到今天早上也沒(méi)搞清楚怎么樣才能把排序后的結(jié)果保存起來(lái)，正好現(xiàn)在公司要做一個(gè)這樣的功能，就又從新學(xué)習(xí)了下。
首先，在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代碼。我所要的叫就是portlets（http://jqueryui.com/demos/sortable/portlets.html）這種效果。就像igoogle首頁(yè)那樣的。冒似很簡(jiǎn)單，把要引用的js都加入后，然后幾行代碼就完事了。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function() { 
$(".column").sortable({ 
connectWith: '.column' 
}); 
}); 
</script> 

html代碼省略...詳情請(qǐng)查看演示

寫完這些之后，你就可以試著拖拽了。有沒(méi)有覺(jué)得很有成就感？不錯(cuò)，小伙子，有前途。sortable 有許多的參數(shù)，詳細(xì)的自己去官網(wǎng)上看吧！只說(shuō)下這里的connectWith:'.column'是什么意思，它就是說(shuō)，凡是class為column的，它都可以把一個(gè)column的portlet拖到另一個(gè)column里去。試試你就知道了。當(dāng)然今天的重點(diǎn)并不是怎么樣去拖拽它，而是拖拽之后刷新還保存著當(dāng)時(shí)的順序。

遇到點(diǎn)小困難了，不過(guò)那也得上啊，不然以后都被女孩子肯嫁給你！^_^ 于是乎我就開(kāi)始google百度了。有人說(shuō)用sortable的serialize方法可以得到一個(gè)ID數(shù)組，可惜，我確實(shí)沒(méi)有得到。如果你做到了也請(qǐng)你tell me 一下;還有人說(shuō)用toArray方法也可以得到ID數(shù)組.這次也確實(shí)得到了。不過(guò)非常令人討厭的事發(fā)生了。

$('.column').sortable('toArray');

這樣也只能得到第一個(gè)class是column里的ID數(shù)組.用each()? I tried, but not work;可能你能做到，也請(qǐng)你告訴我吧！所以只能轉(zhuǎn)走其他方法了?；蛟S你會(huì)說(shuō)，這還不簡(jiǎn)單么，直接把整個(gè)網(wǎng)頁(yè)的布局存起來(lái)不就OK了？哈哈，I also think so！通過(guò)iedeveloper調(diào)試工具發(fā)現(xiàn)，它們拖動(dòng)之后發(fā)現(xiàn)了改變，變的不是樣式，而是div的先后順序。如果我把整個(gè)內(nèi)容保存起來(lái)的話，似乎也行得通，不過(guò)量就有點(diǎn)大了，也不適于動(dòng)態(tài)的內(nèi)容。怎么辦呢，于是我就想著只存它們的ID順序不就O了嗎?于是我又給它們每人一個(gè)ID了。

萬(wàn)事開(kāi)頭難，有了這個(gè)思路了之后，你是否已經(jīng)廁所打開(kāi)了呢？我先去下便下，謝謝開(kāi)門，馬上回來(lái)！

接下來(lái)就一步步按照這個(gè)思路來(lái)吧。首先是獲取到所有的column.

$.each($(".column"), function(m) {}

再找每個(gè)column下的portlet;

$.each($(".column"), function(m) {
$.each($(this).children(".portlet"), function(d) {
}

接著就是把它們按自己的方式存起來(lái)。

復(fù)制代碼代碼如下:

 
function saveLayout(){ 
var list = ""; 
$.each($(".column"), function(m) { 
list += $(this).attr('id') + ":"; 
$.each($(this).children(".portlet"), function(d) { 
list += $(this).attr('id') + "@"; 
}) 
list += "|"; 
}) 
$.cookie("list", list)} 

這里還用到了另一組件jquery.cookie

改下開(kāi)始的

復(fù)制代碼代碼如下:

 
$(".column").sortable({ 
connectWith: '.column', 
stop: saveLayout 
}); 

stop是指拖拽結(jié)束后觸發(fā)的事件.

最后就是按順序讀到容器里去，這里我就不多說(shuō)了，只可意會(huì)，不能言傳哈。貼代碼吧:

復(fù)制代碼代碼如下:

 
var list = $.cookie("list"); //獲取cookie里的list值 
//alert(list) 
var arrColumn = list.split('|'); 
$.each(arrColumn, function(m, n) { 
var elemId = n.split(':')[0]; //容器ID 
var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : ""; //單個(gè)序列ID 
$.each(arrRow, function(m, n) { 
if (n) {//排除空值 
$("#" + elemId).append($("#sb" + n).attr('id', n))//把序列填加進(jìn)容器 
} 
}); 
}) 

好了，今天就這樣吧，打字排版花了我一個(gè)小時(shí)了，公司給我的是一小時(shí)16塊RMB。所以BYE！
如果你有任何的問(wèn)題，都不要來(lái)問(wèn)我，我很忙。到QQ群5678537里找其他人探討吧！

演示代碼http://demo.jb51.net/js/Sortable/Sortable.htm

您可能感興趣的文章: