<details> <summary> php 代码教程示例:如何检索每个 php 和 mysql 的嵌套主 => 详细记录

<details> <summary> php code tutorial example: How to retrieve nested master => detail records per php and mysql

基于 Master => 数据库中 mysql 个字段的详细关系:

公司 - 计划 - 级别

我正在为 HTML5 中的多级布局(也称为嵌套)而苦苦挣扎,但没有 JavaScript。

我想使用带有“Select field1,field2,field3”的 sql 字符串来显示 windows-Explorer 样式中的内容。

也许那里有教程/示例?到目前为止,我还没有找到只使用 HTML 5 而不使用 JavaScript!

的多级 php 脚本

这是我对如何在三个数组中创建条目组合的回答。

    <?php
function combinations($arrays, $i = 0) {
    if (!isset($arrays[$i])) {
        return array();
    }
    if ($i == count($arrays) - 1) {
        return $arrays[$i];
    }
    // get combinations from subsequent arrays
    $tmp = combinations($arrays, $i + 1);
    $result = array();
    // concat each array from tmp with each element from $arrays[$i]
    foreach ($arrays[$i] as $v) {
        foreach ($tmp as $t) {
            $result[] = is_array($t) ? 
                array_merge(array($v), $t) :
                array($v, $t);
        }
    }
    return $result;
}
$arrCombi=combinations(
    array(
        array('Microsoft','Adobe','Softskills'), 
        array('Word','Excel','Photoshop','Homeoffice'), 
        array('Grundlagen','Expert')
        )
    );
$line="";
foreach ($arrCombi as $k => $v){
    $line .= "(".implode(" AND ",$v) . ")  OR \n";
}
$line=substr($line, 0, -4);
echo nl2br($line);
echo"<hr><pre>";
print_r(
    combinations(
        array(
            array('Microsoft','Adobe','Softskills'), 
            array('Word','Excel','Photoshop','Homeoffice'), 
            array('Grundlagen','Expert')
        )
    )
);
echo "</pre>";
?>

A HTML 5 解决方案

<style>
details {
    padding: 1px;
    background-color: #f6f7f8;
    margin-bottom: 1px;
}
details[open] {
    /* the style goes here */
}

summary {
    cursor: pointer;
}

.level_0 {
    margin-left: 1em;
    padding-left: 1em;
    color:red;
}
.level_1 {
    margin-left: 2em;
    padding-left: 1em;
    color:green;
}
.level_2 {
    margin-left: 3em;
    padding-left: 1em;
    color:blue;
}
.level_3 {
    margin-left: 4em;
    padding-left: 1em;
    color:gray;
}
</style>
<h4>
<details open>
    <summary  class='level_0'>Microsoft</summary>
    <details>
        <summary class='level_1'>Word</summary>
            <details>
                <summary class='level_2'>Basic</summary>
                    <ul class='level_3'>
                        <li>Module 1</li>
                        <li>Module 2
                    </ul>
            </details>
            <details>
                <summary class='level_2'>Advanced</summary>
                    <ul class='level_3'>
                        <li>Module 3</li>
                        <li>Module 4
                    </ul>
            </details>
    </details>
    <details>
        <summary class='level_1'>Excel</summary>
            <details>
                <summary class='level_2'>Basic</summary>
                    <ul class='level_3'>
                        <li>Module 5</li>
                        <li>Module 6
                    </ul>
            </details>          
    </details>
</details>
<details open'>
    <summary class='level_0'>Adobe</summary>
    <details>
        <summary class='level_1'>Photoshop</summary>
            <details>
                <summary class='level_2'>Basic</summary>
                    <ul class='level_3'>
                        <li>Module 7</li>
                        <li>Module 8
                    </ul>
            </details>
            <details>
                <summary class='level_2'>Advanced</summary>
                    <ul class='level_3'>
                        <li>Module 9</li>
                        <li>Module 10
                    </ul>
            </details>
    </details>
    <details>
        <summary class='level_1'>Illustrator</summary>
            <details>
                <summary class='level_1'>Basic</summary>
                    <ul class='level_3'>
                        <li>Module 11</li>
                        <li>Module 12
                    </ul>
            </details>          
    </details>
</details>