jquery сохранить позиции элементов (сериализовать?) - PullRequest
0 голосов
/ 25 мая 2009

Как сохранить позиции элементов в div?

Использую ли я сериализацию и если да, то как мне это сделать?

У меня есть этот div:

<div id="produtlist">
    <img id="productid_10" src="images/pic10.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_11" src="images/image1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_12" src="images/image2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_13" src="images/pic1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_14" src="images/pic2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_15" src="images/pic3.jpg" class="sortableproduct" alt="" title="" />
</div>

Ответы [ 2 ]

0 голосов
/ 26 мая 2009

Я использую аналогичную функцию в одном из моих проектов, и у меня есть кусок кода, готовый восстановить порядок. Функция принимает 2 параметра:

  1. Список контейнеров
  2. Файл cookie, содержащий идентификаторы, разделенные запятыми.

Я использую его для переупорядочения списков на основе ul, но в вашем случае он тоже должен работать ...

// Function that restores the list order from a cookie
function restoreOrder( _list, _cookie ) {

    var list = $( '#' + _list );
    if( list == null ) return;

    // fetch the cookie value (saved order)
    var cookie = $.cookie( _cookie );

    if( !cookie ) return;

    // make array from saved order
    var IDs = cookie.split( "," );

    // fetch current order
    var items = list.sortable( "toArray" );

    // make array from current order
    var rebuild = new Array();
    for( var v = 0, len = items.length; v < len; v++ )
        rebuild[items[v]] = items[v];

    for( var i = 0, n = IDs.length; i < n; i++ ) {

        // item id from saved order
        var itemID = IDs[i];

        if( itemID in rebuild ) {

            // select item id from current order
            var item = rebuild[itemID];

            // select the item according to current order
            var child = $( '#' + _list ).children( '#' + item );

            // select the item according to the saved order
            var savedOrd = $( '#' + _list ).children( '#' + itemID );

            // remove all the items
            child.remove();

            // add the items in turn according to saved order
            // we need to filter here since the "ui-sortable"
            // class is applied to all ul elements and we
            // only want the very first!  You can modify this
            // to support multiple lists - not tested!
            $( '#' + _list ).filter( ':first' ).append( savedOrd );

        } // if

    } // for

} // restoreOrder

Я забыл, откуда я это взял (какой-то форум или блог, который появился во время поиска в Google) ... но из-за благодарности первоначальному автору. Я немного изменил исходную процедуру, чтобы сделать ее более пригодной для повторного использования, приняв эти параметры.

Cheers, Микроскопические ^ землянина

0 голосов
/ 25 мая 2009

Что ж, если вам просто нужно запомнить порядок, вы можете просто вставить строку с разделителями-запятыми идентификаторов в cookie? И вытащить их обратно при загрузке страницы.

Насколько я знаю, Serialize работает только с данными формы, а не с элементами DOM.

Чтобы ответить на ваш комментарий, вы должны создать CSV со страницы, используя простой jquery:

var list = '';
$('#productlist .sortableproduct').each(function() {
    list += this.attr('id') + ',';
});

Затем вы сохраняете список в файл cookie или отправляете его обратно на сервер.

Поместить вещи обратно в их порядок немного сложнее. Если вы отправите строку обратно на сервер, будет гораздо проще просто выводить вещи в правильном порядке ... Но вы можете использовать инструменты DOM в jquery для перемещения объектов DOM. В любом случае достаточно просто.

...