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

相关问题