jQuery UI Sortable, a następnie zapisz porządek w bazie danych

Chcę użyć sortablefunkcji interfejsu użytkownika jQuery, aby umożliwić użytkownikom ustawienie zamówienia, a następnie zmianę, zapisanie go w bazie danych i zaktualizowanie. Czy ktoś może napisać przykład, jak by to zrobić?

Funkcja interfejsu użytkownika jQuery sortablezawiera serializemetodę służącą do tego. To naprawdę proste. Oto krótki przykład, który wysyła dane pod określony adres URL, gdy tylko element zmieni położenie.

$('#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'
        });
    }
});

To, co robi, to tworzenie tablicy elementów przy użyciu elementów id. Więc zwykle robię coś takiego:

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

Kiedy użyjesz tej serializeopcji, utworzy ona ciąg zapytania POST w następujący sposób: item[]=1&item[]=2itd. Więc jeśli użyjesz - na przykład - identyfikatorów bazy danych w idatrybucie, możesz po prostu iterować po tablicy POST i odpowiednio zaktualizować pozycje elementów .

Na przykład w PHP:

$i = 0;

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

Przykład na jsFiddle.

Pomyślałem, że to też może pomóc. A) został zaprojektowany, aby ograniczyć ładunek do minimum podczas wysyłania z powrotem na serwer po każdym sortowaniu. (zamiast wysyłać wszystkie elementy za każdym razem lub iterować przez wiele elementów, które serwer może wyrzucić) B) Musiałem odesłać niestandardowy identyfikator bez narażania identyfikatora / nazwy elementu. Ten kod pobierze listę z serwera asp.net, a następnie po posortowaniu zostaną odesłane tylko 2 wartości: identyfikator bazy danych sortowanego elementu i identyfikator bazy danych elementu, obok którego został usunięty. Na podstawie tych 2 wartości serwer może łatwo zidentyfikować nową pozycję.

<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>

Masz szczęście, używam dokładnie tego w moim CMS

Jeśli chcesz zapisać zamówienie, po prostu wywołaj metodę JavaScript saveOrder(). Spowoduje to POSTwysłanie żądania AJAX do saveorder.php, ale oczywiście zawsze możesz wysłać to jako zwykły formularz.

<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();'/>

W saveorder.php; Pamiętaj, że usunąłem całą weryfikację i sprawdzanie.

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

To jest mój przykład.

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

Musisz złapać kolejność w wydarzeniu aktualizacji

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

Mogę zmienić wiersze, postępując zgodnie z zaakceptowaną odpowiedzią i powiązanym przykładem na jsFiddle. Ale z nieznanych powodów nie mogłem uzyskać identyfikatorów po akcjach „zatrzymaj lub zmień”. Ale przykład opublikowany na stronie interfejsu użytkownika JQuery działa dobrze. Możesz sprawdzić ten link tutaj.

Spróbuj z tym rozwiązaniem: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ gdzie nowe zamówienie jest zapisywane w jakimś elemencie HMTL. Następnie przesyłasz formularz z tymi danymi do jakiegoś skryptu PHP i iterujesz przez niego za pomocą pętli for.

Uwaga: musiałem dodać kolejne pole db typu INT (11), które jest aktualizowane (oznaczane znacznikiem czasu) przy każdej iteracji - służy skryptowi, aby wiedzieć, który wiersz jest ostatnio aktualizowany, w przeciwnym razie otrzymasz pomieszane wyniki.