javascript - How to get children and id in jQuery Nestable plugin after drag and drop item and update in database? -
i'm using jquery nestable plugin create menu editor website. i've tried item id , children after user clicks on menu items , change position.
issue: don't know how id , children , update database.
here jquery nestable 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 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> here html 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 parent_id == 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> the result on console
[{"id":1},{"id":44,"children":[{"id":3},{"id":4},{"id":5},{"id":6}]}] edition
in structure want update menus when parent_id == id menus id , create level of menus item bu number of m_order. don't know create structure.
and here 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) ... here images of table structure , menus
to send list php, have change updateoutput function post list 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 save new list order: " + errorthrown); }); }; $('#nestable').nestable({ group: 1, maxdepth: 7, }).on('change', updateoutput); }); </script> in php, receive $_post['list'], shown below. in case, dragged 4th item (id 6) 2nd place (after id 3) on list, expected order 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 ) ) ) ) then can iterate on array , update database accordingly.
edit: in order save data in php, you'll have use recursion navigate children arrays might exist. wrote simple script save on every ordering change:
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 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 items parent_id = :parent_id order 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 &$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 $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 $item) { $m_order++; $sql = " update items set parent_id = :parent_id, m_order = :m_order 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 definition (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) 
Comments
Post a Comment