112

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?

|
209

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 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 ra một chuỗi truy vấn POST như thế này: item[]=1&item[]=2vv Vì vậy, nếu bạn tận dụng - ví dụ - ID cơ sở dữ liệu của bạn trong idthuộc tính, bạn có thể sau đó chỉ cần lặp qua mảng văn và cập nhật vị trí của các yếu tố phù hợp .

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.

|
9

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ỉ 2 giá trị sẽ được gửi lại: Id db 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>
|
  • 1

    Các thẻ ASP có thể gây nhầm lẫn cho những người không quen thuộc với chúng và đây hoàn toàn là một vấn đề về jQuery / HTML.

    – Trịnh Hạnh Như 12:54:24 16/06/2015
  • 1

    đã chỉnh sửa theo phản hồi của bạn.

    – Dương Khánh Ngân 18:04:49 13/10/2017
  • 1

    Hai năm sau! Bận rộn?

    – Ngô Đại Ngọc 20:10:01 13/10/2017
  • 1

    Điều gì xảy ra nếu mục được di chuyển bị bỏ làm mục đầu tiên của danh sách?

    – Hoàng Nguyên Quân 16:50:06 17/11/2017
  • 1

    nếu bất kỳ mục nào bị hủy, thì "bên cạnh" id = 0, action = del và plid = id của mục được hành động, hành động khác = sắp xếp và có 2 param, mục được sắp xếp và bên cạnh nó bị rơi . đó là thông tin tối thiểu mà máy chủ có thể sử dụng để thực hiện các hoạt động còn lại. nó được thử và kiểm tra mẫu. tôi thậm chí có thêm và chèn bằng cách sử dụng cùng một mô hình - chỉ là cách chơi hành động và 2 thông số khác.

    – Tạ Thủy Hằng 09:54:29 21/11/2017
8

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>';
}     
?>
|
6

Đâ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});
    }
});
|
0

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 của JQuery hoạt động tốt với tôi. Bạn có thể kiểm tra liên kết đó ở đây.

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.