Comment inciter les enfants et les id en jQuery Emboîtables plugin après faire glisser et de déposer l'objet et la mise à jour de la base de données?

Je suis en utilisant jQuery Emboîtables plugin pour créer un éditeur de menu pour un site web.
J'ai essayé d'obtenir l'élément ID et Enfants après que l'utilisateur clique sur les éléments de menu et de modifier leur position.

Question: je ne sais pas comment faire pour obtenir l'ID et les Enfants et de mise à jour dans la base de données.

Ici est jQuery Emboîtables plugin

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

Voici HTML pour les menus

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

Le résultat sur Console

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

Édition

Dans ma structure, je veux mettre à jour des menus lors de la Parent_id == id où les menus id et de créer un niveau de menus élément bu nombre de M_order. Mais je ne sais pas à créer cette structure.

Et voici 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)
              ...

Voici les images de mon Table structure et les menus

Comment inciter les enfants et les id en jQuery Emboîtables plugin après faire glisser et de déposer l'objet et la mise à jour de la base de données?

Quel est votre fichier PHP pour le stockage/récupération de ces données à partir de la base de données ressembler? Et quelle est la structure de la table de base de données qui contient cette information? Et quelle est la DB fournisseurs, MSSQL, MySQL?
Je ne sais pas le faire en PHP et j'ai aussi comment puis-je trouver des Id et des enfants, et Comment puis-je mettre à jour m_order lorsque l'utilisateur changement de position d'élément de
Cette exigence rend votre question est trop large. Stackoverflow est un Q&Un site, où il s'attend à ce que vous essayez des choses par vous-même d'abord, et lorsque vous êtes coincé, vous pouvez poser des questions précises. Jetez un oeil à la Comment demander page d'aide. Cela dit, cela ressemblait un peu de plaisir, alors je suis allé de l'avant et a écrit un script PHP pour enregistrer la commande à chaque changement. Mais c'est un générique de mise en œuvre, vous aurez probablement à le modifier pour le faire fonctionner pour votre page. J'ai édité ma réponse à inclure, check it out.

InformationsquelleAutor Heng Sopheak | 2015-07-21

Pour envoyer la liste de PHP, vous devez changer votre updateOutput fonction pour afficher la liste des tâches via 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, vous recevrez $_POST['list'], qui ressemble comme indiqué ci-dessous. Dans ce cas, j'ai traîné le 4ème point (n ° 6) à la 2e place (après l'id 3) sur la liste, de sorte que l'ordre attendu est 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
            )
        )
    )
)

Alors vous pouvez simplement parcourir ce tableau et de mettre à jour votre base de données en conséquence.

Modifier: afin de sauvegarder les données en PHP, vous devrez utiliser la récursivité pour accéder à tous les enfants de tableaux qui pourraient exister. J'ai écrit un script simple qui permettra d'économiser sur chaque commande de changement:

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

Définition de la 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)

Je suis tellement difficile de mettre à jour ce tableau dans ma base de données
Qu'avez-vous essayé jusqu'à présent? Modifier votre question et ajouter votre script PHP et la structure de la table.
Je suis vraiment vous remercie beaucoup pour votre réponse, permettez-moi de le tester maintenant, je vais revenir quand je prêt. Merci
Cher Monsieur, Il travail maintenant, Mais je ne peux pas créer de sous niveau de ce menu, Il peut seulement le niveau de l'un
Heureux d'entendre cela a fonctionné. Je viens de tester le code ci-dessus à nouveau et j'étais capable de créer plusieurs niveaux de sous-menus, PHP est le stockage et la récupération correctement à partir de la base de données. Donc, il doit y avoir un problème sur votre mise en œuvre. Ce que vous pourriez faire est de tester mon exemple et de le voir travailler, peut-être que cela peut vous aider à comprendre le problème sur votre code. Si vous ne réussissez pas, je vous suggère d'ouvrir une nouvelle question et d'expliquer votre problème actuel, pour ne pas faire trop large. Celui-ci, à propos de l'obtention de l'id et les enfants et la mise à jour dans la base de données a déjà été abordé.
Bonjour Monsieur, j'ai déjà créer une question, Veuillez consulter ci-dessous le lien stackoverflow.com/questions/31911187/...
Monsieur, je ne peux pas trouver la solution maintenant, s'il vous Plaît aider stackoverflow.com/questions/31911187/...
hey, pouvez-vous le faire dans visual studio mvc j'en ai besoin s'il vous plaît aider moi.
il y avait des bugs dans la logique mais oui l'idée était géniale et ton idée m'aider à terminer sa version de codeigniter. merci

InformationsquelleAutor Marcos Dimitrio

Vous devez vous connecter pour publier un commentaire.