Created
March 30, 2021 10:37
-
-
Save mertbuldur/d71ef407d6293a3161a5faca062bedae to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$db = new PDO("mysql:host=localhost;dbname=nestable;charset=utf8","root","123123asdasd"); | |
function getTreeArray($parentId,$treeArray = '') | |
{ | |
global $db; | |
if(!is_array($treeArray)){ $treeArray = [];} | |
$data = $db->query("select * from menu where parentId='".$parentId."'")->fetchAll(PDO::FETCH_ASSOC); | |
foreach ($data as $key => $item) { | |
$parentCount = $db->query("select * from menu where parentId='".$item['itemId']."'")->rowcount(); | |
if($parentCount == 0) { | |
$treeArray[] = '<li class="dd-item" data-id="' . $item['itemId'] . '"><div class="dd-handle">' . $item['title'] . '</div></li>'; | |
} | |
if($parentCount != 0){ | |
$treeArray[] = '<li class="dd-item" data-id="'.$item['itemId'].'"><div class="dd-handle">'.$item['title'].'</div> | |
<ol class="dd-list">'; | |
} | |
$treeArray = getTreeArray($item['itemId'],$treeArray); | |
if(array_key_last($data) == $key){ | |
$treeArray[] = '</ol></li>'; | |
} | |
} | |
return $treeArray; | |
} | |
$items = implode(' ',getTreeArray(0,[])); | |
?> | |
<html> | |
<head> | |
<title>Nestable JS</title> | |
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> | |
<script src="jquery.nestable.js"></script> | |
<style type="text/css"> | |
.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } | |
* html .cf { zoom: 1; } | |
*:first-child+html .cf { zoom: 1; } | |
html { margin: 0; padding: 0; } | |
body { font-size: 100%; margin: 0; padding: 1.75em; font-family: 'Helvetica Neue', Arial, sans-serif; } | |
h1 { font-size: 1.75em; margin: 0 0 0.6em 0; } | |
a { color: #2996cc; } | |
a:hover { text-decoration: none; } | |
p { line-height: 1.5em; } | |
.small { color: #666; font-size: 0.875em; } | |
.large { font-size: 1.25em; } | |
/** | |
* Nestable | |
*/ | |
.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; } | |
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; } | |
.dd-list .dd-list { padding-left: 30px; } | |
.dd-collapsed .dd-list { display: none; } | |
.dd-item, | |
.dd-empty, | |
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; } | |
.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc; | |
background: #fafafa; | |
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%); | |
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%); | |
background: linear-gradient(top, #fafafa 0%, #eee 100%); | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
box-sizing: border-box; -moz-box-sizing: border-box; | |
} | |
.dd-handle:hover { color: #2ea8e5; background: #fff; } | |
.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; } | |
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; } | |
.dd-item > button[data-action="collapse"]:before { content: '-'; } | |
.dd-placeholder, | |
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; } | |
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; | |
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), | |
-webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); | |
background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), | |
-moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); | |
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), | |
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); | |
background-size: 60px 60px; | |
background-position: 0 0, 30px 30px; | |
} | |
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; } | |
.dd-dragel > .dd-item .dd-handle { margin-top: 0; } | |
.dd-dragel .dd-handle { | |
-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); | |
box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); | |
} | |
/** | |
* Nestable Extras | |
*/ | |
.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } | |
#nestable-menu { padding: 0; margin: 20px 0; } | |
#nestable-output, | |
#nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; } | |
#nestable2 .dd-handle { | |
color: #fff; | |
border: 1px solid #999; | |
background: #bbb; | |
background: -webkit-linear-gradient(top, #bbb 0%, #999 100%); | |
background: -moz-linear-gradient(top, #bbb 0%, #999 100%); | |
background: linear-gradient(top, #bbb 0%, #999 100%); | |
} | |
#nestable2 .dd-handle:hover { background: #bbb; } | |
#nestable2 .dd-item > button:before { color: #fff; } | |
@media only screen and (min-width: 700px) { | |
.dd { float: left; width: 48%; } | |
.dd + .dd { margin-left: 2%; } | |
} | |
.dd-hover > .dd-handle { background: #2ea8e5 !important; } | |
/** | |
* Nestable Draggable Handles | |
*/ | |
.dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc; | |
background: #fafafa; | |
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%); | |
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%); | |
background: linear-gradient(top, #fafafa 0%, #eee 100%); | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
box-sizing: border-box; -moz-box-sizing: border-box; | |
} | |
.dd3-content:hover { color: #2ea8e5; background: #fff; } | |
.dd-dragel > .dd3-item > .dd3-content { margin: 0; } | |
.dd3-item > button { margin-left: 30px; } | |
.dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; | |
border: 1px solid #aaa; | |
background: #ddd; | |
background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%); | |
background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%); | |
background: linear-gradient(top, #ddd 0%, #bbb 100%); | |
border-top-right-radius: 0; | |
border-bottom-right-radius: 0; | |
} | |
.dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; } | |
.dd3-handle:hover { background: #ddd; } | |
/** | |
* Socialite | |
*/ | |
.socialite { display: block; float: left; height: 35px; } | |
</style> | |
</head> | |
<body> | |
<menu id="nestable-menu"> | |
<button type="button" data-action="expand-all">Expand All</button> | |
<button type="button" data-action="collapse-all">Collapse All</button> | |
</menu> | |
<div class="cf nestable-lists"> | |
<div class="dd" id="nestable"> | |
<ol class="dd-list"> | |
<?php echo $items; ?> | |
</ol> | |
</div> | |
</div> | |
<p><strong>Serialised Output (per list)</strong></p> | |
<textarea id="nestable-output"></textarea> | |
<script> | |
$(document).ready(function() | |
{ | |
var updateOutput = function(e) | |
{ | |
var list = e.length ? e : $(e.target), | |
output = list.data('output'); | |
$.ajax({ | |
type:'POST', | |
url:'/ajax.php', | |
data:{ | |
data:list.nestable('serialize') | |
}, | |
dataType:'json', | |
success:function (result){ | |
console.log(result); | |
} | |
}) | |
if (window.JSON) { | |
output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2)); | |
} else { | |
output.val('JSON browser support required for this demo.'); | |
} | |
}; | |
// activate Nestable for list 1 | |
$('#nestable').nestable({ | |
group: 1 | |
}) | |
.on('change', updateOutput); | |
// output initial serialised data | |
updateOutput($('#nestable').data('output', $('#nestable-output'))); | |
$('#nestable-menu').on('click', function(e) | |
{ | |
var target = $(e.target), | |
action = target.data('action'); | |
if (action === 'expand-all') { | |
$('.dd').nestable('expandAll'); | |
} | |
if (action === 'collapse-all') { | |
$('.dd').nestable('collapseAll'); | |
} | |
}); | |
$('#nestable3').nestable(); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$db = new PDO("mysql:host=localhost;dbname=nestable;charset=utf8","root","123123asdasd"); | |
function insertData($itemId,$parentId){ | |
global $db; | |
$query = $db->prepare("update menu set parentId = ? where itemId = ?"); | |
//$query = $db->prepare("insert into menu(itemId,parentId) values(?,?)"); | |
$query->execute([$parentId,$itemId]); | |
} | |
function fetchTreeArray($data,$parentId = 0){ | |
foreach($data as $item) { | |
$id = $item['id']; | |
$isChildren = (isset($item['children'])) ? $item['children'] : false; | |
insertData($id,$parentId); | |
if ($isChildren) { | |
fetchTreeArray($isChildren,$id); | |
} | |
} | |
} | |
/* | |
fetchTreeArray([ | |
['id'=>1], | |
['id'=>2], | |
['id'=>3], | |
["id"=>4,"children"=>[ | |
['id'=>5], | |
['id'=>6,"children"=>[ | |
["id"=>7], | |
["id"=>8] | |
]], | |
]] | |
]); | |
*/ | |
if($_POST){ | |
//$db->query("delete from menu"); | |
fetchTreeArray($_POST['data']); | |
echo json_encode(["status"=>true]); | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment