JQuery: Sorting hierarchical data?

Question

I have been trying for some time to work out a way to sort nested categories using jQuery. I could not create my own plugin to do this, so I tried to find what was already available. Tried a few hours from this, http://www.jordivila.net/code/js/jquery/ui-widgetTreeList_inheritance/widgetTreeListSample.aspx and could not get it to work.

What are the alternatives to creating a jQuery / jQuery UI script that handles the sorting of child and parent categories in a way that can be combined with the AJAX PHP backend to handle the actual sort in the database?

Thank!

Answer 1

I used the http://www.jordivila.net/jquery-widget-inheritance.html widget to sort the nested categories, and it worked for me.

Try using this simple html file

        

<script src="http://www.jordivila.net/code/js/jquery/ui-widgetTreeList/widgetTreeList.js" type="text/javascript"></script>
<script src="http://www.jordivila.net/code/js/jquery/ui-widgetTreeList_inheritance/widgetTreeList_Sort.js" type="text/javascript"></script>


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://www.jordivila.net/code/js/jquery/ui-widgetTreeList/widgetTreeList.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    #treeListSortable {width:300px;}
</style>

    <script type="text/javascript">
        $(document).ready(function() {
        $('#treeListSortable').treeListSortable();
        });

    </script>

                <ul id="treeListSortable">
                      <li>Node 1
                        <ul>
                            <li>Node 12</li>
                            <li>Node 9</li>
                            <li>Node 7
                                <ul>
                                    <li>Node 6</li>
                                    <li>Node 11</li>
                                    <li>Node 10</li>
                                    <li class="ui-treeList-open">Node 8
                                    <ul>
                                        <li>Node 5</li>
                                        <li>Node 2</li>
                                        <li>Node 4</li>
                                        <li>Node 3</li>
                                    </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>Node 13</li>
                        </ul>
                      </li>
                </ul>        

Answer 2

You can try to structure your hierarchical data in your database using the nested set model, this will allow you to simply query your categories in order of their depth, using one SELECT

Here is an article from MySQL describing how it is implemented in the relational database http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/