javascript - 将 JQuery-UI 可排序连接列表自定义配置保存到本地 Cookie

Question

如果您不想阅读整篇文章，请跳至底部的更新#2。

我使用 jquery-ui 连接列表创建了一个可自定义的 UI: http://jqueryui.com/sortable/#connect-lists

我现在想将用户的 UI 配置保存到他们本地计算机上的 cookie 中，以便他们下次加载页面时将加载他们之前设置的布局，如本页所述: http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/

问题是，在他的文章的第 2 部分讨论了如何保存多个连接列表的自定义配置之后，他忽略了在第 3 部分将代码实现到实际设计中的多个连接列表。我已经能够让我页面上的所有内容都像该页面上的最后一个示例一样工作，但是每当我尝试修改代码以使用连接列表时，该页面就不再有效。

我理解代码背后的基本思想，但我不懂 JavaScript，也没有成功修改代码以使用连接列表。我希望了解 JavaScript 的人能够轻松修改下面的代码，以便像第 2 部分那样处理连接列表。

第2部分保存了多个连接列表的顺序，但没有加载具有相应名称的外部html页面。

第 3 部分加载具有相应项目名称的外部 html 页面，但仅支持单个列表。

第 2 部分的连接列表代码:

// Load items
function loadItemsFromCookie(name)
{
    if ( $.cookie(name) != null )
    {
        renderItems($.cookie(name), '#wrapper');
    }
    else
    {
        alert('No items saved in "' + name + '".');
    }
}

// Render items
function renderItems(items, container)
{
    var html = '';
    var columns = items.split('|');

    for ( var c in columns )
    {
        html += '<div class="column"><ul class="sortable-list">';

        if ( columns[c] != '' )
        {
            var items = columns[c].split(',');

           for ( var i in items )
            {
               html += '<li id="' + items[i] + '">Item ' + items[i] + '</li>';
            }
        }

        html += '</ul></div>';
    }

    $('#' + container).html(html);
}

第 3 部分中不支持连接列表的代码(尝试修改它以支持连接列表):

// Get items
function getItems(id)
{
return $('#' + id + '-list').sortable('toArray').join(',');
}

// Render items
function renderItems(id, itemStr)
{
    var list = $('#' + id + '-list');
    var items = itemStr.split(',')

    for ( var i in items )
    {
        html = '<li class="sortable-item';

        if ( id == 'splash' )
        {
            html += ' col3 left';
        }
        html += '" id="' + items[i] + '"><div class="loader"></div></li>';
        list.append(html);

        // Load html file
        $('#' + items[i]).load('content/' + items[i] + '.html');
    }
}

更新 #1:

我想我几乎拥有它，我只是无法让它从外部 html 文件插入 html。它能够让它插入变量和纯文本，而不是外部 html。

// Render items
    function renderItems(items)
    {
        var html = '';

        var columns = items.split('|');

        for ( var c in columns )
        {
            html += '<div class="column';

            if ( c == 0 )
            {
                html += ' first';
            }

            html += '"><ul class="sortable-list">';

            if ( columns[c] != '' )
            {
                var items = columns[c].split(',');

                for ( var i in items )
                {
                    html += '<li class="sortable-item" id="' + items[i] + '">';

                    //---------This Line Isn't Working--------->
                    $('#' + items[i]).load(items[i] + '.html');
                    //---------This Line Isn't Working--------->

                    html += '</li>';
                }
            }

            html += '</ul></div>';
        }

        $('#example-2-3').html(html);
    }

更新#2:

我一直在查找示例中每个 JavaScript 命令的确切功能，我想我已经找到了问题所在。我不能只加载页面，我需要将外部页面的代码附加到 html 变量。我想我需要使用 .get 命令，例如:

var pagedata = '';
.get(items[i] + '.html', function(pagedata); 
html += pagedata;

有人知道完成此操作的正确语法是什么吗？

Answer 1

我终于得到了可以工作的代码。这是完整的代码(不包括 jquery-ui 相关代码)。外部页面需要与列表id同名。

HTML

    <div id="example-2-3">

                <div class="column first">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id1"></li>
                        <li class="sortable-item" id="id2"></li>
                        <li class="sortable-item" id="id3"></li>
                    </ul>

                </div>

                <div class="column">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id4"></li>
                    </ul>

                </div>

                <div class="column">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id5"></li>
                        <li class="sortable-item" id="id6"></li>
                    </ul>

                </div>

    </div>

脚本

$(document).ready(function(){

    window.onload = loadItemsFromCookie('cookie-2');
    // Get items
    function getItems(exampleNr)
    {
        var columns = [];

        $(exampleNr + ' ul.sortable-list').each(function(){
            columns.push($(this).sortable('toArray').join(','));                
        });

        return columns.join('|');
    }

    // Load items from cookie
    function loadItemsFromCookie(name)
    {
        if ( $.cookie(name) != null )
        {
            renderItems($.cookie(name));
        }
        else 
        {
            alert('No items saved in "' + name + '".');
        }   
    }

    // Render items
    function renderItems(items)
    {
        var html = '';
        var pagedata = '';

        var columns = items.split('|');

        for ( var c in columns )
        {
            html += '<div class="column';

            if ( c == 0 )
            {
                html += ' first';
            }

            html += '"><ul class="sortable-list">';

            if ( columns[c] != '' )
            {
                var items = columns[c].split(',');

                for ( var i in items )
                {
                    html += '<li class="sortable-item" id="' + items[i] + '">';

                    var pagedata = '';
                    var scriptUrl = items[i] + ".html"
                    $.ajax({
                        url: scriptUrl,
                        type: 'get',
                        dataType: 'html',
                        async: false,
                        success: function(data) {
                            result = data;
                            html += data;
                        } 
                    });

                    html += '</li>';
                }
            }

            html += '</ul></div>';
        }

        $('#example-2-3').html(html);
    }

    $('#example-2-3 .sortable-list').sortable({
        connectWith: '#example-2-3 .sortable-list',
        update: function(){
            $.cookie('cookie-2', getItems('#example-2-3'));
        }
    });

});

</script>