1

我在列表中使用了列表，我打算使用 jquery 将 id 发送到另一个 php 文件（updateDB.php）。

我尝试序列化列表但无法获取数据。我不确定我是否做对了，尝试环顾每个地方，但无法弄清楚代码有什么问题。

<ul>
<li id="recordsArray_<?some number?>"><?php echo content?>`

    <ul>
        <?php
        while (some condition) {
            ?>
            <div>
            <li id="subArray_<another number?>"><?php echo content?></li>
            </div>
            <?php
            //conditions - increment within the loop
        }
        ?>
    </ul>
 </li></ul>

jquery代码是这样的，

$(document).ready(function() {
    $(function() {
        $("#contentLeft ul").sortable({opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable('serialize') + '&action=updateMenuListings';
            $.post("updateDB.php", order, function(theResponse) {
                $("#contentRight").html(theResponse);
            });
        }});
    });

    $(function() {
        $("#contentLeft ul li ul").sortable({opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable('serialize') + '&action=updateSubListings';
            $.post("updateDB.php", order, function(theResponse) {
                $("#contentRight").html(theResponse);
            });
        }});
    });
});

id 的 contentLeft 只是列表之前的 id。我打算使它可拖动，因此使用可排序。

在调试时，我无法获取变量“order”中列表的任何 ID。

请务必检查代码并提供帮助。

谢谢

4

1 回答 1

0

下面你会发现一些与你的结构相似的 HTML 以及 JavaScript 和 jQuery 来做你想做的事。这允许您移动顶级项目，以及它们各自的子项目，或者只是重新排列子项目。这两个选项都会生成一个正文，您可以在注释掉的帖子行中使用它。

你可以在这里看到它的实际效果：http: //jsfiddle.net/WTjsG/

HTML：

<div id="ContentLeft">Sortable With Update
    <ul id="Nav" class="sortable navLevel1">
        <li id="Nav_1">Nav1
            <!-- NOTE: format id's for UL and LI items as <name>_<int> for serialize to work properly -->
            <ul id="NavRecords_1" class="sortable navLevel2">
                <li id="Nav1_1">Nav1 Item1</li>
                <li id="Nav1_2">Nav1 Item2</li>
                <li id="Nav1_3">Nav1 Item3</li>
                <li id="Nav1_4">Nav1 Item4</li>
            </ul>
        </li>
        <li id="Nav_2">Nav2
            <ul id="NavRecords_2" class="sortable navLevel2">
                <li id="Nav2_1">Nav2 Item1</li>
                <li id="Nav2_2">Nav2 Item2</li>
                <li id="Nav2_3">Nav2 Item3</li>
                <li id="Nav2_4">Nav2 Item4</li>
            </ul>
        </li>
    </ul>
</div>

带有 jQ​​uery 的 JavaScript：

$(document).ready(function () {
    var isDebugMode = true;

    //Set common sort settings for all lists
    $(".sortable").sortable({
        opacity: 0.6,
        cursor: 'move'
    });

    //Function used to configure update calls for each sort
    function setSortAction(selector, updatePage, updateAction, itemLabel) {
        $(selector).sortable({
            update: function () {
                var itemList = $(this).sortable(
                    "serialize", {
                    attribute: "id",
                    key: itemLabel
                });

                //Create POST request to persist the update
                var bodyContent = "action=" + updateAction + "&" + itemList;
                if (isDebugMode) { alert("DEBUG: bodyContent = \n" + bodyContent); }
                //$.post(updatePage, bodyContent, function (postResult) { alert(postResult); });
            }
        });
    }

    //Set sort update action for top level and second level
    setSortAction(".navLevel1", "updateDB.php", "updateMenuListings", "record");
    setSortAction(".navLevel2", "updateDB.php", "updateMenuItemListings", "record");

});
于 2013-09-07T14:52:34.843 回答