1

jqueryの並べ替え可能なリストの状態を保存する方法については、ここやWebにたくさんの投稿がありますが、復元するのはどうですか？

私の場合、リストではなくページレイアウトを整理しているので、左右の列（またはそれ以上）があります。

これが私が過去に行ったことです（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>

各ポートレットには、含まれている独自のテンプレートファイルがあります。並べ替え可能なリストの状態を保存するときは、復元しやすいように、左右の列を別々に保存します。

並べ替え可能なリストをどのように復元しますか？

私はそれを行う純粋なjqueryの方法を好みます。たとえば、ページ上でポートレットを非表示にし、ソート可能なリストにjson配列を渡し、「作成」時にポルトをソートして表示します

$( ".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/

4

2 に答える 2

2

私は自分のコンセプトをコード化することができました。もっと答えがあることを願っています！ http://jsfiddle.net/Qwjp9/

これにより、json配列に基づいて保存された位置を復元できます。すべてのポートレット要素は、非表示の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()});
    }                       
});​
于 2012-10-19T02:29:40.680 に答える
-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);
于 2012-10-19T00:34:39.490 に答える