Giao diện người dùng jQuery Sắp xếp, sau đó viết thứ tự vào cơ sở dữ liệu

Tôi muốn sử dụng sortablechức năng UI UI để cho phép người dùng đặt hàng và sau đó thay đổi, ghi nó vào cơ sở dữ liệu và cập nhật nó. Ai đó có thể viết một ví dụ về cách này sẽ được thực hiện?

sortableTính năng UI jQuery bao gồm một serializephương thức để làm điều này. Nó khá đơn giản, thực sự. Dưới đây là một ví dụ nhanh chóng gửi dữ liệu tới URL được chỉ định ngay khi một phần tử có vị trí thay đổi.

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

Điều này làm là nó tạo ra một mảng các phần tử bằng cách sử dụng các phần tử id. Vì vậy, tôi thường làm một cái gì đó như thế này:

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

Khi bạn sử dụng serializetùy chọn, nó sẽ tạo một chuỗi truy vấn POST như thế này: item[]=1&item[]=2v.v. Vì vậy, nếu bạn sử dụng - ví dụ - ID cơ sở dữ liệu của bạn trong idthuộc tính, sau đó bạn có thể chỉ cần lặp qua mảng POSTed và cập nhật vị trí của các phần tử tương ứng .

Ví dụ: trong PHP:

$i = 0;

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

Ví dụ trên jsFiddle.

Nghĩ rằng điều này cũng có thể giúp đỡ. A) nó được thiết kế để giữ tải trọng ở mức tối thiểu trong khi gửi lại cho máy chủ, sau mỗi lần sắp xếp. (thay vì gửi tất cả các phần tử mỗi lần hoặc lặp qua nhiều phần tử mà máy chủ có thể tặc lưỡi) B) Tôi cần gửi lại id tùy chỉnh mà không ảnh hưởng đến id / tên của phần tử. Mã này sẽ lấy danh sách từ máy chủ asp.net và sau đó khi sắp xếp chỉ có 2 giá trị sẽ được gửi lại: Id id của phần tử được sắp xếp và id id của phần tử bên cạnh nó bị loại bỏ. Dựa trên 2 giá trị đó, máy chủ có thể dễ dàng xác định tư thế mới.

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

Bạn thật may mắn, tôi sử dụng chính xác trong CMS của mình

Khi bạn muốn lưu trữ đơn hàng, chỉ cần gọi phương thức JavaScript saveOrder(). Nó sẽ thực hiện một POSTyêu cầu AJAX để saveorder.php, nhưng tất nhiên bạn luôn có thể đăng nó dưới dạng thông thường.

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

Trong saveorder.php; Hãy nhớ rằng tôi đã xóa tất cả xác minh và kiểm tra.

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

Đây là ví dụ của tôi.

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

Bạn cần nắm bắt thứ tự trong sự kiện cập nhật

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

Tôi có thể thay đổi các hàng bằng cách làm theo câu trả lời được chấp nhận và ví dụ liên quan trên jsFiddle. Nhưng do một số lý do không xác định, tôi không thể có được id sau hành động "dừng hoặc thay đổi". Nhưng ví dụ được đăng trong trang UI JQuery hoạt động tốt với tôi. Bạn có thể kiểm tra liên kết đó ở đây.

Hãy thử với giải pháp này: http://phppot.com/php/sorting-mysql-row-order-USE-jquery/ nơi đơn hàng mới được lưu trong một số phần tử HMTL. Sau đó, bạn gửi biểu mẫu với dữ liệu này tới một số tập lệnh PHP và lặp lại với máng lặp.

Lưu ý: Tôi đã phải thêm một trường db khác thuộc loại INT (11) được cập nhật (dấu thời gian) trên mỗi lần lặp - nó phục vụ cho tập lệnh để biết hàng nào được cập nhật lại, hoặc nếu không bạn sẽ có kết quả bị xáo trộn.