In this post i will describe how to deal with hierarchical lists using the jquery plugin nestedSortable, operations include sorting assign to a parent how to save that data to the database.
Requirements
- Jquery
- Jquery UI
- nestedSortable plugin
Jquery nestedSortable extends the traditional Jquery UI Sortable by adding another functionality which is to organize list items using parent-child relationships or to assign children to parents, in addition to maintain sorting among these items.
Before we begin go and download the plugin from this link , in addition we will need jquery and jquery ui that’s because the plugin depends in jquery ui sortable.
Example: consider we have this nav menu
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nested sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
ol {
list-style-type: none;
}
.menu-handle {
padding: 5px;
background: #d7d1d1;
border-radius: 3px;
border: 2px solid #8c8585;
font-size: 13px;
margin-bottom: 10px;
}
.menu-options {
float: right;
}
#output {
color: red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.mjs.nestedSortable.js"></script>
</head>
<body>
<ol class="sortable">
<li id="menuItem_1">
<div class="menu-handle">
<span>
Home
</span>
<div class="menu-options">
<a href="#">Delete</a>
</div>
</div>
<ol>
<li id="menuItem_2">
<div class="menu-handle">
<span>
About us
</span>
<div class="menu-options">
<a href="#">Delete</a>
</div>
</div>
<ol>
<li id="menuItem_3">
<div class="menu-handle">
<span>
Our Portfolio
</span>
<div class="menu-options">
<a href="#">Delete</a>
</div>
</div>
</li>
</ol>
</li>
<li id="menuItem_4">
<div class="menu-handle">
<span>
Our Team
</span>
<div class="menu-options">
<a href="#">Delete</a>
</div>
</div>
</li>
</ol>
</li>
<ol>
</ol>
<li id="menuItem_5">
<div class="menu-handle">
<span>
How it works
</span>
<div class="menu-options">
<a href="#">Delete</a>
</div>
</div>
</li>
<li id="menuItem_6">
<div class="menu-handle">
<span>
Contact us
</span>
<div class="menu-options">
<a href="#">Delete</a>
</div>
</div>
</li>
</ol>
<div id="output"></div>
<script>
$('ol.sortable').nestedSortable({
handle: 'div.menu-handle',
helper: 'clone',
items: 'li',
opacity: .6,
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
isTree: true,
change: function() {
$("#output").text("item relocated");
}
});
</script>
</body>
</html>
As you see above this is a simple nested list, now navigate to the page and try to move the list items.
Note that the “id” attribute in each list item is important which we will use later to return a hierarchical string representation of the list when saved to the db.
Now to retrieve the hierarchical string representation we will call nestedSortable(‘serialize’) as shown here:
....
</ol>
<button type="button" id="serialize">Serialize</button>
<script>
$("#serialize").click(function(e) {
e.preventDefault();
$("#output").text($('ol.sortable').nestedSortable('serialize'));
});
</script>
When you click on the “serialize” button it will return something like this:
menuItem[1]=null&menuItem[2]=1&menuItem[3]=1&menuItem[4]=1&menuItem[5]=null&menuItem[6]=null
This string represents the relationship between each item and the next and it has the form:
menuItem[current Item id]=parent id
in case there is no parent the parent id is null
Parsing and Sending To Server
Now i will parse this string into php to be saved into database so add this code inside the click event as shown below:
<script>
$("#serialize").click(function(e) {
e.preventDefault();
var serialized = $('ol.sortable').nestedSortable('serialize');
$.ajax({
url: "./sort.php",
method: "GET",
data: {sort: serialized},
success: function(res) {
}
});
});
});
</script>
sort.php
<?php
$sort = $_REQUEST['sort'];
parse_str($sort, $arr);
if(isset($arr['menuItem'])) {
var_dump($arr['menuItem']);
array_walk($arr['menuItem'], function($val, $key) {
// save to db
});
}
Click “serialize” button and inspect the response in the network tab on firefox or chrome you will find that it’s converted to an array using php parse_str() function and the resulting array contain the key which is the item id and the value is the corresponding parent, in the example above i looped over the array using array_walk() , it’s up to you save or update your database.
