Php 如何在MySQL数据库中存储多级ul列表?

Php 如何在MySQL数据库中存储多级ul列表?,php,jquery,mysql,list,store,Php,Jquery,Mysql,List,Store,我从mysql数据库中列出了至少5个级别的长列表。用户有机会对项目进行排序、从一个列表中删除一个项目到另一个列表、重命名或删除。然后保存它 我使用PHP进行列表,使用Javascript/Jquery重新排列项目 我的问题是,将ul li元素拆分为一个数组的最佳方法是什么?重要的是要有每个元素的父id 非常简化的示例代码: <a href="#">Parent item name</a> <ul data-level='0'> <li>

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

我使用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>


  • 因此,“第二级项目2”应具有其父级“子项目名称”(其id存储在其名称旁边的隐藏输入字段中)

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


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

    IMHO当单击submit按钮时,jquery可以迭代列表并创建JSON对象(每个成员都有父值,0代表根值),然后使用AJAX将其发送给后面的成员

    以下是一个可能的解决方案:

    HTML:

    您可以在以下位置查看/测试:

    这将为ul/li的每一层生成一个具有级别的数组

    因此,它将首先通过第一级(父母),然后通过其子ULs


    希望这会有所帮助。

    一个具有父/子外键自身关系的单表,以及适当的服务器端代码,可以将该平面表转换为嵌套数组,并对其进行json编码和发送?实际实施由OP决定。
    <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>
    
     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_);
    }