Помогите настроить сохранение Sortable | jQuery UI

Тема в разделе "JavaScript", создана пользователем Extalionez, 29 ноя 2012.

Модераторы: ZiX
  1. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Доброго времени суток. Появилась естественная необходимость сохранения порядка, в базу данных. На данный момент имеется таблица, примерно такого вида
    HTML:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>sortable demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    </head>
    <body>
    <form action="index.php">
        <table id="sort" class="grid" title="Kurt Vonnegut novels">
            <thead>
                <tr><th>id</th><th>Title</th><th></th></tr>
            </thead>
            <tbody>
                <tr><td>4</td><td>Slaughterhouse-Five</td><td><input type="hidden" name="order[]" value="1"></td></tr>
                <tr><td>3</td><td>Player Piano</td><td><input type="hidden" name="order[]" value="2"></td></tr>
                <tr><td>5</td><td>Cat's Cradle</td><td><input type="hidden" name="order[]" value="3"></td></tr>
                <tr><td>2</td><td>Breakfast of Champions</td><td><input type="hidden" name="order[]" value="4"></td></tr>
                <tr><td>1</td><td>God Bless You, Mr. Rosewater</td><td><input type="hidden" name="order[]" value="5"></td></tr>
            </tbody>
        </table>​
    </form>
    <script>$("#sort tbody").sortable();</script>
     
    </body>
    </html>
    Мне необходимо чтобы в зависимости от того, как расположил элементы пользователь в
    HTML:
    <input type="hidden" name="order[]" value="5">
    вставлялось значение этого <tr> по-порядку сверху вниз. Догадываюсь что это сделать довольно просто, используя
    HTML:
    $( ".sort tbody" ).sortable({
        update: function( event, ui ) {}
    });
    , но я ламер и сам не смог догнать как это сделать:oops:
     
  2. denik

    denik Постоялец

    Регистр.:
    1 июл 2011
    Сообщения:
    80
    Симпатии:
    43
    Не до конца понял что тебе надо сохранять и куда, но вот примеры получения данных:
    Код:
    $(function(){
        $("#sort tbody").sortable({
            update: function( event, ui ){
                var _val = ui.item.find("input[name='order[]']").val();
                var _pos = ui.position.top;
                var _index = ui.item.index();
                alert(_val+' : '+_pos);
            }
        });
    });​
    Тут можно запустить пример

    Если нужно сохранять сортировку на сервер - то просто отправляй POST-запрос. Данные сортировки - это индексы переменной order.
     
    astass и Extalionez нравится это.
  3. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    В общем всё что нужно, так это в value
    HTML:
    <input type="hidden" name="order[]" value="5">
    вставить цифру, означающую какую позицию занимает сейчас этот <tr>. Причём поменять сразу у всех.
     
  4. denik

    denik Постоялец

    Регистр.:
    1 июл 2011
    Сообщения:
    80
    Симпатии:
    43
    Если необходимо обновить значения переменной order[], то можно воспользоваться этим скриптом:
    HTML:
    $(function(){
        $("#sort tbody").sortable({
            update: function( event, ui ){
                $("#sort tbody tr").each(function(index){
                    $(this).find("input[name='order[]']").val(++index);
                });
                //alert($("#sort tbody").html());
            }
        });
    });
    Однако обычно поступают иным способом - значения сортировки берут из индекса. Т.е. в value переменной - пишем ID-строки и на стороне сервера получаем массив с сортировкой:
    Код:
    _POST[order] => array(
        [0] => 4
        [1] => 3
        [2] => 5
        [3] => 2
        [4] => 1
    )
    Слева у нас - порядок, справа - ID-строки.
     
    astass нравится это.
  5. Katsumoto

    Katsumoto Создатель

    Регистр.:
    10 июл 2012
    Сообщения:
    10
    Симпатии:
    3
    Вам нужен метод serialize (http://api.jqueryui.com/sortable/#method-serialize)

    нужно всем tr дать ид "sort_id", где сорт это key а ид собственно ид елемента.

    Код:
    $('#sort tbody').sortable({
      update: function(e, ui) {
        // этот сорт можно послать на сервер
        var sort = $('#sort tbody').sortable('serialize', { key: 'sort' });
        // скрипт получит массив с ид елементов, индекс их позиции
      }
    });