PHP Lang
  1. PHP Lang
  3. Как получить детей и идентификатор в jQuery Nestable плагин после перетаскивания элемента и обновления в базе данных?
Intereting Posts
Вернуть первый внешний результат из строки, используя регулярные выражения Как установить заголовок по умолчанию в Guzzle? Массив для объекта Удалите index.php, когда доступ с использованием ip-адреса HTML В PDF Высокое разрешение Случайное проигрывание переменных сеанса только в Google Chrome & URL Rewriting Что означает% S в PHP, HTML или XML? Причины сильного ввода параметров в PDO? Создание виджета настраиваемых категорий Модуль PDO уже загружен в Unknown в строке 0 в настройке laravel на ubuntu Как удалить диакритические знаки из текста? Проблема с кодировкой URL-адреса страницы Laravel 5 Можно ли получить имя текущего класса от неинсталлированного объекта в PHP? Как использовать переменную внутри параметра $ _POST в php Тот же веб-сервер, тот же drupal, тот же db, один знак?

Как получить детей и идентификатор в jQuery Nestable плагин после перетаскивания элемента и обновления в базе данных?

Я использую плагин jQuery Nestable для создания редактора меню для веб-сайта. Я попытался получить идентификатор элемента и детей после того, как пользователь нажимает на пункты меню и меняет свое положение.

Проблема . Я не знаю, как получить идентификатор и детей и обновить их в базе данных.

Вот плагин 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, где menus id и создать уровень меню item bu number of 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, вам нужно изменить функцию 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 } ?> с <?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)