0

こんにちは、次のようなリストがあります: http://imgur.com/z2nf4yz このリストでは、別のリストに項目をドラッグできます。ここで、これらの項目をドラッグしたら、これらの項目のデータベース値を更新したいと思います。理想的には、「保存」ボタンを押したときにのみ更新したいのですが、面倒な場合は無視してかまいません。

これを使用して項目をドラッグします: http://johnny.github.io/jquery-sortable/、jQuery UI のバージョンと非常によく似ています。

私は今、Ajax がどのように機能するかを完全に理解しています。これはリスト構造です:

<ol class="nav nav-tabs nav-stacked sortable" style=
"margin-top: 25px;">
    <li class="page_select menuid_1" style=
    "color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
    Main Menu</li>

    <li class="page_select menuid_1 position_1 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId1" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=1">Home</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_1 position_4 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId2" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=2">About Me</a>

        <ol class="nav nav-tabs nav-stacked">
            <li class=
            "page_select menuid_1 position_1 online">
                <span class="pull-right" style=
                "margin: 8px 32px 0 0"><a class=
                "deleteToggle icon-trash pull-right"
                data-toggle="modal" href="#deleteModal"
                id="deleteId12" style=
                "font-style: italic"></a></span><a href="pages.php?page=12">Test</a>
            </li>

            <li class=
            "page_select menuid_1 position_2 offline">
                <span class="pull-right" style=
                "margin: 8px 32px 0 0"><a class=
                "deleteToggle icon-trash pull-right"
                data-toggle="modal" href="#deleteModal"
                id="deleteId11" style=
                "font-style: italic"></a></span><a href="pages.php?page=11">Test
                Page</a>
            </li>
        </ol>
    </li>

    <li class="page_select menuid_1 position_4 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId3" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=3">Contact</a>

        <ol class="nav nav-tabs nav-stacked">
            <li class=
            "page_select menuid_1 position_9 offline">
                <span class="pull-right" style=
                "margin: 8px 32px 0 0"><a class=
                "deleteToggle icon-trash pull-right"
                data-toggle="modal" href="#deleteModal"
                id="deleteId7" style=
                "font-style: italic"></a></span><a href="pages.php?page=7">Test
                Page</a>
            </li>
        </ol>
    </li>

    <li class="page_select menuid_1 position_3 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId4" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=4">Portfolio</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_1 position_3 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId5" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=5">Shop</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_2" style=
    "color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
    Footer Menu</li>

    <li class="page_select menuid_2 position_5 online">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId6" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=6">Sitemap</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class=
    "page_select menuid_2 position_9 offline">
        <span class="pull-right" style=
        "margin: 8px 32px 0 0"><a class=
        "deleteToggle icon-trash pull-right"
        data-toggle="modal" href="#deleteModal" id=
        "deleteId8" style=
        "font-style: italic"></a></span><a href=
        "pages.php?page=8">Last Page</a>

        <ol class="nav nav-tabs nav-stacked"></ol>
    </li>

    <li class="page_select menuid_3" style=
    "color: #1b1b1b; padding: 40px 20px 10px; margin-top: 10px; font-weight: bold; font-size: 14px;">
    aa

        <p style=
        "margin-left: 40px; font-size: 12px; color: #ccc;">
        No pages yet.</p>
    </li>
</ol>

PHPによって生成されるため、書式設定は少したわごとです。これがうまくいかない場合は、新しいクラスやものを自由に提案してください。

データベースには、「position」、「parent_id」、「menu_id」の 3 つのフィールドがあります。Position はリスト内の位置、parent_id は項目の ID、menu_id は項目のメニューです (スクリーンショットでは、異なるメニューに気付くでしょう)。これらの値はすべて、要素を移動するときに更新する必要があります。

さて、これは大変な作業になる可能性があることを理解していますので、誰かが私にコードを渡してくれるとは思っていません。誰かが私を助けてくれたら、とてもありがたいです。

4

1 に答える 1

2

私は最近ASPで同様のことをしました。これは、ニーズに合わせてカスタマイズできる基本的な考え方です。

HTML リストにはiden、データベース内のレコード ID である属性があります。

<li iden="<%=rs("ID")%>" class="ui-state-default"><%=rs("TITLE")%></li>

Javascript はupdateイベントから実行されます。

$("#order-block1").sortable({
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true,
        update: function( event, ui ) {
            var t = ""
            $(this).children('li').each(function(index, element) {
                t+= "UPDATE PROJECTS SET RANK = '" + (index+1) + "' WHERE ID =" + $(this).attr('iden') + ";"
            });

            $.ajax({
                url: 'updateOrder.asp?str=' + t, type: 'POST',
                success: function(data) {
                },
                error: function() {
                    alert('error updating order');
                }
            });
        }
    });

サーバー側 (updateOrder.asp) は次のようになります。

set conn=Server.CreateObject("ADODB.Connection")
conn.Open db

str = request.QueryString("str")

a = split(str, ";")

for each x in a

    on error resume next

    conn.Execute x

next

conn.close

基本的に、SQL コードで文字列を作成し、それを分割し;てループを使用し、各 SQL コマンドを実行します。

于 2013-11-01T23:30:26.150 に答える