jQuery UI Sortable จากนั้นเขียนคำสั่งลงในฐานข้อมูล

ฉันต้องการใช้sortableฟังก์ชั่นjQuery UI เพื่อให้ผู้ใช้สามารถตั้งค่าคำสั่งซื้อจากนั้นในการเปลี่ยนแปลงให้เขียนลงในฐานข้อมูลและอัปเดต ใครช่วยเขียนตัวอย่างว่าจะทำได้ไหม

คุณลักษณะ jQuery UI 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เป็นต้นดังนั้นหากคุณใช้ประโยชน์เช่น - รหัสฐานข้อมูลของคุณในidแอตทริบิวต์คุณสามารถทำซ้ำผ่านอาร์เรย์ POSTed และอัปเดตตำแหน่งขององค์ประกอบตามนั้น .

ตัวอย่างเช่นใน PHP:

$i = 0;

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

ตัวอย่างบน jsFiddle

คิดว่านี่อาจช่วยได้เช่นกัน A) ได้รับการออกแบบมาเพื่อให้น้ำหนักบรรทุกน้อยที่สุดในขณะที่ส่งกลับไปยังเซิร์ฟเวอร์หลังจากการจัดเรียงแต่ละครั้ง (แทนที่จะส่งองค์ประกอบทั้งหมดในแต่ละครั้งหรือวนซ้ำผ่านหลาย ๆ องค์ประกอบที่เซิร์ฟเวอร์อาจตัดออก) B) ฉันต้องการส่งรหัสที่กำหนดเองกลับโดยไม่กระทบกับ id / ชื่อขององค์ประกอบ รหัสนี้จะได้รับรายการจากเซิร์ฟเวอร์ asp.net จากนั้นเมื่อเรียงลำดับเพียง 2 ค่าจะถูกส่งกลับ: รหัสฐานข้อมูลขององค์ประกอบที่เรียงลำดับและรหัสฐานข้อมูลขององค์ประกอบถัดจากที่ถูกทิ้ง จากค่า 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>

คุณโชคดีฉันใช้สิ่งที่แน่นอนใน CMS ของฉัน

saveOrder()เมื่อคุณต้องการในการจัดเก็บการสั่งซื้อเพียงโทรวิธี JavaScript จะทำให้POSTคำขอAJAX เป็น 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>';
}     
?>

นี่คือตัวอย่างของฉัน

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});
    }
});

ฉันสามารถเปลี่ยนแถวโดยทำตามคำตอบที่ยอมรับและตัวอย่างที่เกี่ยวข้องใน jsFiddle แต่เนื่องจากสาเหตุที่ไม่ทราบสาเหตุฉันจึงไม่สามารถรับรหัสได้หลังจากการดำเนินการ "หยุดหรือเปลี่ยนแปลง" แต่ตัวอย่างที่โพสต์ในหน้า JQuery UI ใช้งานได้ดีสำหรับฉัน คุณสามารถตรวจสอบลิงค์ได้ที่นี่

ลองใช้วิธีนี้: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ ซึ่งคำสั่งซื้อใหม่จะถูกบันทึกไว้ในองค์ประกอบ HMTL บางรายการ จากนั้นคุณส่งแบบฟอร์มพร้อมข้อมูลนี้ไปยังสคริปต์ PHP บางส่วนและทำซ้ำด้วยสำหรับลูป

หมายเหตุ: ฉันต้องเพิ่มช่องฐานข้อมูลประเภท INT (11) อีกช่องหนึ่งซึ่งได้รับการอัปเดต (ประทับเวลา) ในการทำซ้ำแต่ละครั้ง - ทำหน้าที่ให้สคริปต์ทราบว่าแถวใดที่อัปเดตล่าสุดไม่เช่นนั้นคุณจะได้ผลลัพธ์ที่มีสัญญาณรบกวน