javascript - item - ¿Cómo obtener hijos y la identificación en el plugin jQuery Nestable después de arrastrar y soltar el elemento y actualizar en la base de datos?

nestable jquery

Question

Estoy usando el complemento jQuery Nestable para crear un editor de menú para un sitio web. Intenté obtener ID del artículo y Niños después de que el usuario haga clic en los elementos del menú y cambie su posición.

Problema : no sé cómo obtener ID e Hijos y actualizar a la base de datos.

Aquí está el plugin 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>

Aquí hay HTML para menús

<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>

El resultado en la consola

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

Edición

En mi estructura quiero actualizar los menús cuando Parent_id == id donde los menús id y el nivel de menú de los elementos de la clase M de M_order . Pero no sé para crear esta estructura.

Y aquí está 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)
              ...

Aquí hay imágenes de mi estructura de tabla y menús

Answer 1

Para enviar la lista a PHP, debe cambiar su función updateOutput para publicar la lista a través de 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>

En PHP, recibirá $_POST[''list''] , que se verá como se muestra a continuación. En este caso, arrastré el 4 ° elemento (ID 6) hasta el 2 ° lugar (después del ID 3) en la lista, por lo que el orden esperado es 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
            )
        )
    )
)

Luego puede iterar sobre esta matriz y actualizar su base de datos en consecuencia.

Editar : para guardar los datos en PHP, tendrás que usar la recursividad para navegar por todas las matrices de niños que puedan existir. Escribí un script simple que guardará en cada cambio de pedido:

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);
?>

Definición de tabla (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)