如何在 MySQL 数据库中存储多级 ul 列表？答案

【问题标题】：How to store multiple level ul list in a MySQL database?如何在 MySQL 数据库中存储多级 ul 列表？
【发布时间】：2012-11-18 17:17:24
【问题描述】：

我从 mysql 数据库中列出了一个很长的、至少 5 个级别的<ul> 列表。用户有机会对项目进行排序、将一个项目从一个列表拖放到另一个、重命名或删除。然后保存。

我使用 PHP 进行列表，使用 Javascript/Jquery 重新排列项目。

我的问题是将 ul li 元素拆分为数组的最佳方法是什么？拥有每个元素的父 id 很重要。

非常简化的示例代码：

<a href="#">Parent item name</a>
<ul data-level='0'>
    <li>
        <a href="#">Child item name</a>
        <ul data-level='1'>
            <li><a href="#">2nd level item 1</a></li>
            <li><a href="#">2nd level item 2</a></li>
            <li><a href="#">2nd level item 3</a></li>
            <li><a href="#">2nd level item 4</a></li>
        </ul>
    </li>
</ul>

因此，“2nd level item 2”应该有它的父“子项名称”（它的 id 存储在其名称旁边的隐藏输入字段中）。

列表可以是任何级别，因为用户也可以添加其他级别。代码也必须处理 15 级列表。

我正在考虑通过 javascript 获取放置在每个 <li> 元素中的隐藏输入的值。 JQuery 能够获取孩子的数量。但这似乎不是最好的解决方案。

【问题讨论】：

whathaveyoutried.com
具有父/子外键自关系的单个表，以及用于将该平面表转换为嵌套数组的适当服务器端代码，您可以对其进行 json 编码和发送？实际实现由 OP 决定。

标签： php jquery mysql list store

【解决方案1】：

恕我直言，当单击提交按钮时，您的 jquery 可以迭代列表并创建 JSON 对象（每个成员都有父值，0 代表根）并使用 AJAX 将其发送到后面。

【讨论】：

【解决方案2】：

这是一个可能的解决方案：

HTML：

<a href="#">Parent item name</a>
<ul class="0" id="level_0_count_0" data-level='0'>
<li>
    <a href="#">Child item name</a>
    <ul class="1" id="level_1_count_0" data-level='1'>
        <li><a href="#">ul 0 2nd level item 1pppppppp</a></li>
        <li><a href="#">ul 0 2nd level item 2pppppppp</a></li>
        <li><a href="#">ul 0 2nd level item 3pppppppp</a></li>
        <li>
            <a href="#">ul 0 2nd level item 4</a>
            <ul class="2" id="level_2_count_0" data-level='1'>
                <li><a href="#">ul 2 3nd level item 1cccccccc</a></li>
                <li><a href="#">ul 2 3nd level item 2cccccccc</a></li>
                <li><a href="#">ul 2 3nd level item 3cccccccc</a></li>
                <li><a href="#">ul 2 3nd level item 4cccccccc</a></li>
            </ul>
        </li>
    </ul>
</li>

<li>
    <a href="#">Child item name</a>
    <ul class="1" id="level_1_count_1" data-level='1'>
        <li><a href="#">ul 1 2nd level item 1</a></li>
        <li><a href="#">ul 1 2nd level item 2</a></li>
        <li><a href="#">ul 1 2nd level item 3</a></li>
        <li><a href="#">ul 1 2nd level item 4</a></li>
    </ul>
</li>

JavaScript：

 var $j = jQuery.noConflict();
$j(document).ready(function() {
var temp = new Array();
find_ul(0, temp);
});


function find_ul(parent_class, new_object_, level_count){
if( $j('.' + parent_class + ' > li > ul').length == 0){
    return new_object_;
}else{
    var current_objs = $j('.' + parent_class + ' > li > ul');
    var i = 0;
    parent_class++;
    $j.each(current_objs, function() {
            var current_ul_id = '';
            var object_lis =  $j('ul#level_' + parent_class + '_count_' + i + ' > li');
            var b = 0;
            var tempora = new Array();
            var current_ul_id = $j(this).attr('id');
            alert(current_ul_id);

           $j.each(object_lis, function() {
               tempora[b] = $j(this).html();
               b++;
               alert($j(this).html());

            });

            new_object_[i] = {ul_id: current_ul_id, lis:tempora};
            i++;

    });
}
   find_ul(parent_class, new_object_);
}

您可以在以下位置查看/测试它： http://jsfiddle.net/BsDpY/4/

这将生成一个数组，其中包含 ul/li 的每一层的级别

所以它将首先通过第一级（父母）然后通过它的子 ULs..

希望对您有所帮助。

【讨论】：