拖放项目并在数据库中更新后，如何在 jQuery Nestable 插件中获取子项和 ID？

Question

我正在使用 jQuery Nestable 插件 为网站创建菜单编辑器。在用户单击菜单项并更改其位置后，我尝试获取项目 ID 和 Children。

问题：我不知道如何获取 ID 和 Children 并更新到数据库中。

这是jQuery可嵌套插件

<script>
    $(document).ready(function () {
        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target), output = list.data('output');
            if (window.JSON) {output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
            } else {
                output.val('JSON browser support required for this demo.');
            }
        console.log(list.nestable('serialize'));
        console.log(window.JSON.stringify(list.nestable('serialize')));
        };
        $('#nestable').nestable({
            group: 1,
            maxDepth: 7,
        }).on('change', updateOutput);
        updateOutput($('#nestable').data('output', $('#nestable-output')));
    });
</script>

这里是 HTML 菜单

<div class="cf nestable-lists">
    <div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1 when parent == 0</div> </li>
            <li class="dd-item" data-id="44"> <div class="dd-handle"> Item 2 when this parent_id == its id </div>
                <ol class="dd-list">
                    <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="4"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="5"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="6"><div class="dd-handle">Item 3</div></li>
                </ol>
            </li>
        </ol>
    </div>
</div>

控制台上的结果

[{"id":1},{"id":44,"children":[{"id":3},{"id":4},{"id":5},{"id":6}]}]

版本

在我的结构中，我想在 Parent_id == id[=54 时更新菜单=] 其中菜单 id 并创建菜单项级别 M_order。但是我不知道要创建这个结构。

这里是 var_dump($this->input->post('list'));

1 => array (size=1) 'id' => string '2' (length=1) 2 => array (size=1) 'id' => string '3' (length=1) 3 => array (size=1) 'id' => string '4' (length=1) 4 => array (size=1) 'id' => string '5' (length=1) 5 => array (size=2) 'id' => string '6' (length=1) 'children' => array (size=1) 0 => array (size=2) ...

这是我的 Table 结构和菜单的图片

Answer 1

要将列表发送到 PHP，您必须通过 AJAX:

将 updateOutput 函数更改为 post 列表

<script>
$(document).ready(function () {
    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target), output = list.data('output');

        $.ajax({
            method: "POST",
            url: "saveList.php",
            data: {
                list: list.nestable('serialize')
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Unable to save new list order: " + errorThrown);
        });
    };

    $('#nestable').nestable({
        group: 1,
        maxDepth: 7,
    }).on('change', updateOutput);
});
</script>

在PHP中，您将收到$_POST['list']，如下图所示。在这种情况下，我将第 4 个项目 (id 6) 拖到列表中的第二个位置 (在 id 3 之后)，因此预期的顺序是 3, 6, 4, 5:

Array (
    [0] => Array (
        [id] => 1
    )
    [1] => Array (
        [id] => 44
        [children] => Array (
            [0] => Array (
                [id] => 3
            )
            [1] => Array (
                [id] => 6
            )
            [2] => Array (
                [id] => 4
            )
            [3] => Array (
                [id] => 5
            )
        )
    )
)

然后你可以遍历这个数组并相应地更新你的数据库。

编辑：为了保存PHP中的数据，您必须使用递归来导航所有可能存在的子数组。我写了一个简单的脚本，可以保存每次订购更改：

index.php

<?php
require "pdoConnection.php";
$list = getFullListFromDB($conn);
?>

<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/dbushell/Nestable/master/jquery.nestable.js"></script>
<script>
$(document).ready(function () {
    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target), output = list.data('output');

        $.ajax({
            method: "POST",
            url: "saveList.php",
            data: {
                list: list.nestable('serialize')
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Unable to save new list order: " + errorThrown);
        });
    };

    $('#nestable').nestable({
        group: 1,
        maxDepth: 7,
    }).on('change', updateOutput);
});
</script>
</head>

<body>
<div class="cf nestable-lists">
    <div class="dd" id="nestable">
<?php displayList($list); ?>
    </div>
</div>
</body>
</html>

<?php
function getFullListFromDB($conn, $parent_id = 0) {
    $sql = "
        SELECT id, parent_id, description
        FROM items 
        WHERE parent_id = :parent_id
        ORDER BY m_order
    ";

    $statement = $conn->prepare($sql);
    $statement->bindValue(':parent_id', $parent_id, PDO::PARAM_INT);
    $statement->execute();

    $result = $statement->fetchAll(PDO::FETCH_ASSOC);

    foreach($result as &$value) {
        $subresult = getFullListFromDB($conn, $value["id"]);

        if (count($subresult) > 0) {
            $value['children'] = $subresult;
        }
    }
    unset($value);

    return $result;
}

function displayList($list) {
?>
    <ol class="dd-list">
    <?php foreach($list as $item): ?>
    <li class="dd-item" data-id="<?php echo $item["id"]; ?>"><div class="dd-handle"><?php echo $item["description"]; ?></div>
    <?php if (array_key_exists("children", $item)): ?>
    <?php displayList($item["children"]); ?>
    <?php endif; ?>
    </li>
    <?php endforeach; ?>
    </ol>
<?php
}
?>

saveList.php

<?php

require "pdoConnection.php";

if ($_POST) {
    saveList($conn, $_POST['list']);
    exit;
}

function saveList($conn, $list, $parent_id = 0, &$m_order = 0) {
    foreach($list as $item) {
        $m_order++;

        $sql = "
            UPDATE items
            SET 
                parent_id = :parent_id,
                m_order = :m_order
            WHERE id = :id
        ";
        $statement = $conn->prepare($sql);
        $statement->bindValue(":parent_id", $parent_id, PDO::PARAM_INT);
        $statement->bindValue(":id", $item["id"], PDO::PARAM_INT);
        $statement->bindValue(":m_order", $m_order, PDO::PARAM_INT);
        $statement->execute();

        if (array_key_exists("children", $item)) {
            saveList($conn, $item["children"], $item["id"], $m_order);
        }
    }
}

?>

pdoConnection.php

<?php
$server = "myServer"; $database = "DbName"; $username = "myself"; $password = "secret";
$conn = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
?>

Table 定义 (MSSQL)

CREATE TABLE [items](
    [id] [int] NOT NULL,
    [parent_id] [int] NOT NULL,
    [description] [nvarchar](100) NOT NULL,
    [m_order] [int] NOT NULL,
    CONSTRAINT [PK_items] PRIMARY KEY CLUSTERED ([id] ASC)
) ON [PRIMARY]

INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (1, 0, N'Item 1', 1)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (2, 0, N'Item 2', 2)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (3, 2, N'Item 3.1', 3)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (4, 2, N'Item 3.2', 4)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (5, 2, N'Item 3.3', 5)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (6, 2, N'Item 3.4', 6)

拖放项目并在数据库中更新后，如何在 jQuery Nestable 插件中获取子项和 ID？

How to get children and id in jQuery Nestable plugin after drag and drop item and update in database?

javascript

php

jquery

codeigniter

jquery-plugins