jQuery UI Sıralanabilir, ardından sırayı bir veritabanına yaz

JQuery UI sortableişlevini, kullanıcıların bir sipariş ayarlamasına ve daha sonra değiştirildiğinde, veritabanına yazmasına ve güncellemesine izin vermek için kullanmak istiyorum . Birisi bunun nasıl yapılacağına dair bir örnek yazabilir mi?

JQuery UI sortableözelliği, bunu yapmak için bir serializeyöntem içerir . Gerçekten çok basit. Bir öğenin konumu değişir değişmez verileri belirtilen URL'ye gönderen hızlı bir örneği burada bulabilirsiniz.

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

Bunun yaptığı şey, öğeleri kullanarak bir dizi öğe oluşturmasıdır id. Bu yüzden genellikle şöyle bir şey yaparım:

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

serializeSeçeneği kullandığınızda, şuna benzer bir POST sorgu dizisi oluşturacaktır: item[]=1&item[]=2vb. Dolayısıyla, örneğin idöznitelikte veritabanı kimliklerinizi kullanırsanız , POSTed dizisi boyunca basitçe yineleme yapabilir ve öğelerin konumlarını buna göre güncelleyebilirsiniz. .

Örneğin, PHP'de:

$i = 0;

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

JsFiddle ile ilgili örnek.

Bunun da yardımcı olabileceğini düşündüm. A) Her sıralamadan sonra sunucuya geri gönderirken yükü minimumda tutacak şekilde tasarlanmıştır. (her seferinde tüm öğeleri göndermek veya sunucunun atabileceği birçok öğeyi yinelemek yerine) B) Öğenin kimliği / adından ödün vermeden özel kimliği geri göndermem gerekiyordu. Bu kod, listeyi asp.net sunucusundan alacak ve ardından yalnızca 2 değer sıralandığında geri gönderilecektir: Sıralanan öğenin db kimliği ve yanında bırakıldığı öğenin db kimliği. Bu 2 değere dayanarak, sunucu yeni konumu kolayca belirleyebilir.

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

Şanslısın, CMS'imde aynısını kullanıyorum

Siparişi saklamak istediğinizde JavaScript yöntemini çağırmanız yeterlidir saveOrder(). POSTSaveorder.php için bir AJAX isteğinde bulunacaktır, ancak elbette bunu her zaman normal bir form olarak gönderebilirsiniz.

<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 içerisinde; Tüm doğrulama ve kontrolleri kaldırdığımı unutmayın.

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

Bu benim örneğim.

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

Güncelleme etkinliğinde siparişi yakalamanız gerekiyor

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

JsFiddle üzerinde kabul edilen yanıtı ve ilgili örneği takip ederek satırları değiştirebilirim. Ancak bilinmeyen bazı nedenlerden dolayı, "durdur veya değiştir" eylemlerinden sonra kimlikleri alamadım. Ancak JQuery UI sayfasında yayınlanan örnek benim için iyi çalışıyor. Bu bağlantıyı buradan kontrol edebilirsiniz .

Bu çözümü deneyin: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ burada yeni sipariş bazı HMTL öğelerinde kaydedilir. Daha sonra formu bu verilerle birlikte bazı PHP betiğine gönderir ve for döngüsü ile yinelersiniz.

Not: Her yinelemede güncellenen (zaman damgası olan) INT (11) türünde başka bir db alanı eklemek zorunda kaldım - bu, komut dosyasının en son hangi satırın güncellendiğini bilmesine hizmet eder, aksi takdirde karıştırılmış sonuçlarla sonuçlanırsınız.