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

Extalionez

Extalionez

Клоун
Заблокирован
Регистрация
21 Авг 2008
Сообщения
368
Реакции
191
  • Автор темы
  • Заблокирован
  • #1
Доброго времени суток. Появилась естественная необходимость сохранения порядка, в базу данных. На данный момент имеется таблица, примерно такого вида
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:
 
Не до конца понял что тебе надо сохранять и куда, но вот примеры получения данных:
Код: 
$(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.
 
  • Автор темы
  • Заблокирован
  • #3
В общем всё что нужно, так это в value
HTML: 
<input type="hidden" name="order[]" value="5">
вставить цифру, означающую какую позицию занимает сейчас этот <tr>. Причём поменять сразу у всех.
 
Если необходимо обновить значения переменной 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-строки.
 
Вам нужен метод serialize (Для просмотра ссылки Войди или Зарегистрируйся)

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

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