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

Posted 2023-02-24

技术标签:

【中文标题】拖放项目并在数据库中更新后，如何在 jQuery Nestable 插件中获取子项和 id？【英文标题】：How to get children and id in jQuery Nestable plugin after drag and drop item and update in database? 【发布时间】：2015-10-10 11:31:15 【问题描述】：

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

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

这里是 jQuery Nestable 插件

<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 where menus 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)
              ...

这是我的表格结构和菜单的图片

【问题讨论】：

您当前用于从数据库存储/检索此数据的 php 文件是什么样的？保存这些信息的数据库表的结构是什么？什么是数据库供应商、MSSQL、mysql？我不知道用 PHP 做什么，我也如何找到 Id 和孩子，以及当用户更改项目位置时如何更新 m_order 此要求使您的问题过于宽泛。 *** 是一个问答网站，希望你先自己尝试，当你遇到困难时，你可以提出具体的问题。查看How to ask 帮助页面。话虽如此，这看起来有点有趣，所以我继续编写了一个 PHP 脚本来保存每次更改的排序。但这是一个通用实现，您可能需要对其进行调整以使其适用于您的页面。我已经编辑了我的答案以包含它，请查看。 【参考方案1】：

要将列表发送到 PHP，您必须更改 updateOutput 函数以通过 AJAX 发布列表：

<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）拖到列表中的第 2 位（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);
?>

表定义 (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)

【讨论】：

我很难在我的数据库中更新这个数组到目前为止你尝试过什么？编辑您的问题并添加您当前的 PHP 脚本和表结构。我真的非常感谢你的回答，让我现在测试一下，我准备好后会回来。谢谢尊敬的先生它现在可以工作但是我无法创建此菜单的子级别它只能一级很高兴听到它奏效了。我刚刚再次测试了上面的代码，我能够创建许多级别的子菜单，PHP 正在从数据库中正确存储和检索。所以，你的实现一定有问题。您可以做的是按原样测试我的示例并查看它是否有效，也许这可以帮助您找出代码中的问题。如果您仍然没有成功，我建议您打开一个新问题并解释您当前的问题，不要让这个问题过于宽泛。这个关于获取 id 和 children 并更新到数据库的问题已经解决了。

以上是关于拖放项目并在数据库中更新后，如何在 jQuery Nestable 插件中获取子项和 id？的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 拖放后 CSS 未正确更新，但在 Inspector 中更新

拖放后如何更新记录

如何使用 jQuery 进行拖放以在两个或多个 div 之间移动数据，然后触发对 db 的更新？

拖放后的jQuery UI Sortable停止事件

Android：在 RecyclerView 中拖放项目时如何有效更新 SQLite 数据库？

如何在listview - WPF MVVM上拖放后更新codeBehind中的ObservableCollection