javascript - 使用 jquery 序列化无序列表

Question

我在列表中使用了列表，并且打算使用 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。

请检查代码并提供帮助。

谢谢

Answer 1

下面您将找到一些与您的结构类似的 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");

});