【问题标题】:Converting String Seperated by Comma and Hash to Array将逗号和哈希分隔的字符串转换为数组
【发布时间】:2012-10-30 19:00:44
【问题描述】:

我正在使用 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"

我很难将它转换回数组,我还想知道一旦它被转换回数组,我该如何获取这个数组并将其应用回盒子的排序顺序?

【问题讨论】:

    标签: javascript string arraylist local-storage jquery-ui-sortable


    【解决方案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. 当列没有项目时

    希望对你有所帮助!

    约翰...

    【讨论】:

    • 非常感谢约翰!没有你的帮助,我不可能做到这一点!它的人喜欢你为什么我仍然有我的工作:) 永远感激!晴天
    • 嗨,约翰,我还有一个简短的问题。我刚刚意识到,当有多个页面使用此代码并且页面之间的框 id 不同时。代码只会抓取最后一个本地存储。我想知道是否有办法将以前保存的本地存储与正在创建的新存储结合起来?
    • 我解决这个难题的方法是为您的 localStorage 项目设置页面特定的 ID。也就是说,我不会将它们都称为“可排序”,而是:page1.sortables、page2.sortables、page3.sortables。然后每个页面将有它自己的 ID,并有一个单独的存储位置来存储它的 portlet 订单。要获得特定于页面的 ID,您可以让每个页面分别指定其 ID,或者查看 window.location.pathname(如果每个页面始终从其自己的 URL 路径名引用)。我会倾向于每个页面提供它自己的 ID。
    • 再次感谢约翰! - 我所做的是将var“sortables”替换为location.pathname。它现在工作:)
    【解决方案2】:

    尝试像下面这样的简单迭代来创建一个object,其中键为col1,值为数组[box3, box2, box1]

    演示: 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;
    }
    

    【讨论】:

    • 感谢 Vega。我让它与你的代码 sn-p 一起工作。但是我如何获取这个结果并将其应用回排序顺序?我对此非常陌生
    • @user1467439 看看这个stackoverflow.com/questions/9981563/….. 我现在正在做其他事情.. 今天晚些时候再看。
    • 我目前正在查看它,仍在尝试弄清楚。该示例仅显示如何对一个列表进行排序,我不确定如何将其翻译为两列 div。它开始看起来很复杂。
    猜你喜欢
    • 2014-07-01
    • 2021-12-18
    • 1970-01-01
    • 2021-12-06
    • 1970-01-01
    • 2011-06-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多