jQuery UI сортируется, затем записывает порядок в базу данных

Я хочу использовать jQuery UI sortable функция, позволяющая пользователям устанавливать порядок, а затем при изменении записывать его в базу данных и обновлять. Может ли кто - нибудь написать пример того, как это будет сделано?

108
jquery jquery-ui jquery-ui-sortable mysql php

6 ответов

интерфейс jQuery sortable функции включает в себя serialize метод для этого. На самом деле все очень просто. Вот быстрый пример, который отправляет данные на указанный URL-адрес, как только элемент изменяет положение.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

это делает то, что он создает массив элементов, используя элементы id. Итак, я обычно делаю что-то вроде этого:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

при использовании serialize опция, она создаст запрос POST строка такая:item[]=1&item[]=2 etc. Поэтому, если вы используете - например - ваши идентификаторы базы данных в id атрибут, вы можете просто перебирать разнесенный массив и соответственно обновлять позиции элементов.

например, в PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

пример на jsFiddle.

196

подумал, что это тоже может помочь. А) он был разработан, чтобы держать нагрузку до минимума при отправке обратно на сервер, после каждой сортировки. (вместо отправки всех элементов каждый раз или повторения многих элементов, которые сервер может выбросить) б) мне нужно было отправить обратно пользовательский идентификатор без ущерба для идентификатора / имени элемента. Этот код получит список от asp.net сервер, а затем при сортировке будут отправлены только 2 значения: идентификатор DB отсортированного элемента и идентификатор db элемента рядом с который был отброшен. На основе этих 2 значений сервер может легко идентифицировать новую позицию.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>
9

вам повезло, я использую точную вещь в своей CMS

когда вы хотите сохранить заказ, просто вызовите метод JavaScript saveOrder(). Это сделает AJAX POST запрос saveorder.php, но, конечно, вы всегда можете опубликовать его как обычную форму.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

в saveorder.php; имейте в виду, что я удалил все проверки и проверки.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>
8

вот мой пример.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

вам нужно поймать порядок в событии обновления

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});
7

Я могу изменить строки, следуя принятому ответу и связанному примеру на jsFiddle. Но по каким-то неизвестным причинам, я не мог получить идентификаторы после "или" действия. Но пример, опубликованный на странице пользовательского интерфейса JQuery, отлично работает для меня. Ты можешь!--1-->проверьте эту ссылку здесь.

0

попробуйте это решение: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ где новый порядок сохраняется в некотором элементе HMTL. Затем вы отправляете форму с этими данными в какой-то php-скрипт, и повторите его с помощью for loop.

Примечание: мне пришлось добавить еще одно поле БД типа INT(11), которое обновляется(timestamp'ED) на каждой итерации - он служит для скрипта, чтобы знать, какая строка обновляется, или же вы заканчиваете скремблированными результатами.

0