Question

这里和网上有很多帖子关于如何保存jquery可排序列表的状态但是如何恢复？

在我的情况下，我正在组织一个页面布局，而不是一个列表，所以我将有一个左右列（或更多）。

这是我过去所做的（使用php + smarty）：

<div id="leftsort">
    {section loop=$leftSort name="ls"}
        {if $leftSort[ls]}{include file="index/sort/`$leftSort[ls]`.tpl"}{/if}
    {/section}
</div>
<div id="rightsort">
    {section loop=$rightSort name="rs"}
        {if $rightSort[rs]}{include file="index/sort/`$rightSort[rs]`.tpl"}{/if}
    {/section}
</div>

每个portlet都有自己的模板文件。当我保存可排序列表的状态时，我将左右列分开保存，以便更容易恢复。

您如何恢复可排序列表？

我更喜欢纯jquery方式，例如 - 将portlet隐藏在页面上，将json数组传递给可排序列表，然后在'create'上排序并显示portlet

$( ".selector" ).sortable({
   create: function(event, ui) { 
     -- load sortable positions in a json array --
     -- parse the array and move the hidden portlets into position --
     -- show portlets --
   }
});

对我来说，具体的代码并不是完全必需的，所以任何概念或想法都会受到赞赏。

谢谢！

- 思考如下：http://jsfiddle.net/8gYsy/

Answer 1

我设法编写了我的概念，我希望有更多的答案！ http://jsfiddle.net/Qwjp9/

这将允许您基于json数组恢复保存的位置。所有portlet元素都将加载到隐藏的div中并移动。我也添加了一个保存示例。

var cols=jQuery.parseJSON('{"col1":["p1","p2"],"col2":["p3"]}');
$( ".column" ).sortable({
    connectWith: ".column",
    create: function(){
        var colid=this.id;      
        var col=cols[colid];
        $.each(col, function(index, value) {
           $('#'+value).appendTo($('#'+colid));
        });
    }, 
    update: function() {
         $.get('saveSortable.php',
              {col: this.id, sort:$(this).sortable('toArray').toString()});
    }                       
});

Answer 2

http://jsfiddle.net/veLhT/

的工作示例

Html代码：

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

jQuery代码：

// store elements
var d=$('ul').html();
// alter data (in your case sort the data)
$('ul li').eq(2).remove();
// reset contents
$('ul').html(d);

Jquery可排序还原portlet到已保存的设置

2 个答案: