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>

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

1 个答案: