jQuery: Sorting hierarchical data?

Question

Hi everybody,

I have tried for some time to work out a way of sorting nested categories with jQuery. I failed to build my own plugin to do this, so I tried to find something that were available already. Tried a few hours now with this one, http://www.jordivila.net/code/js/jquery/ui-widgetTreeList_inheritance/widgetTreeListSample.aspx and cant get it to work.

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

Thanks!

Answer 1

You could try structuring your hierarchical data in your database using the Nested Set Model, it will allow you to simply query your categories in order of their depth using single SELECT

Here is an article from MySQL describing how it is implemented in a relational database http://dev.mysql.com/tech-resources/articles/hierarchical-data.html

Answer 2

I used the widget from http://www.jordivila.net/jquery-widget-inheritance.html to sort 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>