using jquery nested sortable plugin

Using Jquery nestedSortable Plugin To Sort Hierarchical Lists

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

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:

When you click on the “serialize” button it will return something like this:

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:

sort.php

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.

Share this: