1

我正在使用jquery sortable()創建可拖放和可排序的框。將用逗號和散列分隔的字符串轉換爲數組

jQuery代碼看起來是這樣的:

$('.column').sortable({ 
    connectWith:    '.column', 
    handle:      '.header', 
    cursor:      'move', 
    placeholder:    'placeholder', 
    forcePlaceholderSize: true, 
    opacity: 0.8, 
    stop: function(event, ui) 
     { 
      $(ui.item).find('h2').click(); 
      var sortorder=''; 

      $('.column').each(function(){ 
       var itemorder=$(this).sortable('toArray'); 
       var columnId=$(this).attr('id'); 
       sortorder+=columnId+'='+itemorder.toString()+'&'; 
      }); 
      sortorder = sortorder.substring(0, sortorder.length - 1) 
      console.log('SortOrder: '+sortorder); 
      //localStorage.setItem(JSON.stringify(sortorder).sortable); 
      localStorage.setItem("sortables", sortorder); 
      //localStorage.getItem("sortables"); 
     } 
    }).disableSelection(); 

它產生的排序順序證明後像這樣,然後將其保存在本地存儲的字符串:

「COL1 = BOX3,BOX2, box1 & col2 = box4「

我很難嘗試將其轉換回數組,並且我也想知道一旦它被轉換回數組,我該如何獲取該數組並將其應用回到盒子的排序順序?

回答

1

一旦存儲和檢索的排序順序localStorage,您想要遍歷每個列,然後按照它們先前在列中的順序將它們「附加」到portlet。因此,最後一個portlet將被最後追加,並且第一個portlet將被追加。

下面是代碼:

var str = localStorage.getItem("sortables." + window.location.pathname); 
    if (str) { 
     var cols = str.split('&'); 
     for (var i = 0; i < cols.length; i++) { 
      var col = cols[i].split('='); 
      if (col[1].length > 0) { 
       var vals = col[1].split(','); 
       for (var j = 0; j < vals.length; ++j) { 
        console.log('appending ' + vals[j] + ' to ' + col[0]); 
        $('#'+col[0]).append($('#'+vals[j])); 
       } 
      } 
     } 
    } 

這裏是小提琴:http://jsfiddle.net/bWXZU/10/

請注意,有要正確處理幾個條件:(和上面的代碼一樣)

  1. 什麼都不在本地存儲
  2. 當一列沒有項目

希望這可以幫助你!

約翰...

+0

非常感謝你John!沒有你的幫助,我無法做到這一點!它的傢伙喜歡你爲什麼我仍然有我的工作:) 永遠感謝! Sunny – user1467439

+0

嗨,約翰,我還有一個簡單的問題。我剛剛意識到,當有多個頁面與此代碼和不同的框ID從頁面到頁面。代碼將只抓取最後一個本地存儲。我想知道是否有辦法將之前保存的本地存儲與正在創建的新存儲組合在一起? – user1467439

+0

我對這種困境的解決方法是爲localStorage項目設置頁面特定的ID。也就是說,我不會調用所有的「可排序」,而是有:page1.sortables,page2.sortables,page3.sortables。每個頁面將擁有自己的ID,並且具有單獨的存儲位置以用於其Portlet訂單。要獲得頁面特定的ID,可以讓每個頁面分別指定其ID,或者查看window.location.pathname(如果每個頁面始終從其自己的URL路徑名引用)。我會傾向於提供自己ID的每個頁面。 –

1

嘗試一個簡單的迭代像下面來創建密鑰的objectcol1和值作爲數組[box3, box2, box1]

DEMO:http://jsfiddle.net/2yt5y/2

var str = 'col1=box3,box2,box1&col2=box4'; 

var cols = str.split('&'); 
var result = {}; 
for (var i = 0; i < cols.length; i++) { 
    var col = cols[i].split('='); 
    var vals = col[1].split(','); 

    result[col[0]] = vals; 
} 
+0

謝謝你那維加。我知道它與你的代碼片段一起工作。但是,如何獲得這個結果並將其應用回排序順序?我extreamly newbe在這 – user1467439

+0

@ user1467439你可以創建一個小提琴http://www.jsfiddle.com你有什麼? –

+0

當然!這裏是 http://jsfiddle.net/nXZkU/2/ – user1467439

相關問題