jquery - 订单子(monad)元素的可排序组-6ren

jquery - 订单子(monad)元素的可排序组

转载作者：行者123 更新时间：2023-11-28 23:23:28

我有一个包含产品的MySQL表和另一个包含集合的表。

每个集合都包含一些产品(但有些产品没有集合)。

我将集合 id 存储在产品列中，如下所示:

在管理面板中，我以这种方式显示所有产品:

但现在我需要使其可排序并按集合分组，如下所示:

实际上，产品是可排序的(使用 jQuery UI)，我将订单存储在数据库中，因此产品会按该顺序显示。

如何将每个系列的所有产品分组并重新排序该组以便产品更改顺序？

MCVE重新排序的实际逻辑:https://jsfiddle.net/jimmyadaro/mty2br9n/

最佳答案

你需要像这样格式化 Html fiddle :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <!-- CSS library -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {

            //Look the EXTERNAL RESOURCES (jquery 2.1.0 and jquery ui 1.11.4)
            $(".container").children('.collection').uniqueId().end().sortable({
                axis: 'y',
                opacity: 0.9,
                revert: true,
                cursor: 'move',
                update: function (event, ui) {
                    var order = $(this).sortable('toArray');
                    $("#log").text(order);
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="collection">
            Fruits
            <ul collection="1">
                <li product="1">Watermelon</li>
                <li product="2">Apple</li>
                <li product="3">Grape</li>
            </ul>
        </div>
        <div class="collection">
            Vegetables
            <ul collection="2">
                <li product="4">Lettuce</li>
                <li product="5">Tomato</li>
                <li product="6">Carrot</li>
            </ul>
        </div>
        <div class="collection">
            Others
            <ul collection="3">
                <li product="7">Bread</li>
                <li product="8">Cake</li>
            </ul>
        </div>


    </div>

    <hr>

    <div id="log"></div>
</body>
</html>

关于jquery - 订单子(monad)元素的可排序组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40494130/

文章推荐： ios - 在 UITabbarController 中使用 UINavigationController

文章推荐： ios - 带有来自 API 的图像的 Swift tableView 在滚动时滞后

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 订单子(monad)元素的可排序组