Question

我有一个带有产品的MySQL表和带有集合的其他表。

每个系列都包含一些产品（但某些产品没有产品）。

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

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

但是现在我需要对它进行排序并按集合进行分组，如下所示：

实际上产品是可排序的（使用 jQuery UI ），我将订单存储在数据库中，以便按顺序显示产品。

如何对每个系列的所有产品进行分组并重新订购该产品组，以便产品更改订单？

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

Answer 1

你需要格式化这样的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>

订单子元素的可排序组

1 个答案: