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 生成的。如果这样做不行，请随意建议新的课程和东西。

在数据库中，我有 3 个字段“position”、“parent_id”和“menu_id”。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 回答