jQuery：对分层数据进行排序？答案

【问题标题】：jQuery: Sorting hierarchical data?jQuery：对分层数据进行排序？
【发布时间】：2010-06-07 19:57:53
【问题描述】：

我已经尝试了一段时间来找出一种使用 jQuery 对嵌套类别进行排序的方法。我没有构建自己的插件来做到这一点，所以我试图找到一些已经可用的东西。现在用这个 http://www.jordivila.net/code/js/jquery/ui-widgetTreeList_inheritance/widgetTreeListSample.aspx 尝试了几个小时，但无法让它工作。

创建 jQuery / jQuery UI 脚本处理子类别和父类别排序的替代方法是什么，可以与 AJAX PHP 后端结合以处理数据库中的实际排序？

谢谢！

【问题讨论】：

标签： php javascript jquery mysql hierarchical-data

【解决方案1】：

您可以尝试使用嵌套集模型在数据库中构建层次结构数据，它允许您使用单个 SELECT 以按深度顺序简单地查询您的类别

这是一篇来自 MySQL 的文章，描述了它是如何在关系数据库中实现的 http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/

【讨论】：

【解决方案2】：

我使用来自 http://www.jordivila.net/jquery-widget-inheritance.html 的小部件对嵌套类别进行排序，它对我有用。

尝试使用这个简单的 html 文件

<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>

【讨论】：