129

jQuery UIsortable関数を使用して、ユーザーが順序を設定し、変更時にデータベースに書き込んで更新できるようにしたい。誰かがこれがどのように行われるかについての例を書くことができますか？

4

6 に答える 6

236

jQuery UIsortable機能には、これを行うための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属性でデータベースIDを使用する場合は、POST配列を繰り返し処理し、それに応じて要素の位置を更新できます。 。

たとえば、PHPの場合：

$i = 0;

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

jsFiddleの例。

于 2013-03-26T10:51:49.097 に答える
12

これも役立つかもしれないと思った。A）ソート後、サーバーに送り返す間、ペイロードを最小限に抑えるように設計されています。（毎回すべての要素を送信したり、サーバーがチャックアウトする可能性のある多くの要素を反復処理したりする代わりに）B）要素のID/名前を損なうことなくカスタムIDを返送する必要がありました。このコードはasp.netサーバーからリストを取得し、並べ替えると2つの値のみが返されます。並べ替えられた要素のdbidと次にドロップされた要素のdbidです。これらの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>
于 2014-03-20T09:01:01.337 に答える
9

運が良ければ、CMSで正確なものを使用します

注文を保存する場合は、JavaScriptメソッドを呼び出すだけsaveOrder()です。saveorder.phpに対してAJAXPOSTリクエストを作成しますが、もちろん、通常のフォームとしていつでも投稿できます。

<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>';
}     
?>
于 2013-03-26T09:28:09.377 に答える
7

これが私の例です。

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});
    }
});
于 2014-03-26T05:39:09.170 に答える
0

jsFiddleで受け入れられた回答と関連する例に従うことで、行を変更できます。しかし、いくつかの不明な理由により、「停止または変更」アクションの後でIDを取得できませんでした。しかし、JQueryUIページに投稿された例は私にとってはうまく機能します。ここでそのリンクを確認できます。

于 2015-07-02T14:50:01.307 に答える
0

次のソリューションを試してください：http：//phppot.com/php/sorting-mysql-row-order-using-jquery/ ここで、新しい順序がいくつかのHMTL要素に保存されます。次に、このデータを含むフォームをPHPスクリプトに送信し、forループで繰り返し処理します。

注：反復ごとに更新（タイムスタンプ）されるタイプINT（11）の別のdbフィールドを追加する必要がありました。これは、スクリプトが最近更新された行を知るのに役立ちます。そうしないと、結果がスクランブルされてしまいます。

于 2017-01-06T17:40:07.227 に答える