我需要創建無限的類別,我使用 php mysql。
我的資料庫結構。
| ID | 姓名 | parent_id |
|---|---|---|
| 1 | 電子的 | 0 |
| 2 | 筆記本電腦 | 1 |
| 3 | 桌面 | 1 |
| 4 | 車 | 0 |
| 5 | 雷諾 | 4 |
| 6 | 梅甘娜 | 5 |
我想要達到的外觀;
![如何分類串列?[PHP手風琴]](https://img.uj5u.com/2021/11/29/bb4478d59521433a840a59b04bede34a.png)
我想用 php 制作一個這樣的手風琴選單,但我真的找不到例子。
你能給我推薦一種方法嗎?
uj5u.com熱心網友回復:
PHP 部分:例如創建一個帶有一個引數的遞回函式。引數為parentId,默認值為0。
在這個函式內部做一個查詢,選擇所有的條目,其中 parent_id 是函式的引數。
現在做一個foreach。在 foreach 內部呼叫此函式,但將 id(而不是 parentid)作為引數,并將子查詢的結果作為新列添加到行的結果中。
通過這種方式,您可以獲得一個帶有嵌套的陣列。
用嵌套回傳這個陣列。
為了向您展示基本上再做同樣的事情。創建一個遞回函式,它只是遍歷給定的陣列,并在 foreach 內部作為您給子陣列的引數進入下一個級別。然后你回顯當前條目的 html 代碼。
對于樣式使用引導程式。
那也許不是最美麗的方式,但簡短而簡單的方式。
OT:請記住,無限嵌套在具有多個級別時可能會令人困惑。
您正在尋找的內容與此類似:https : //stackoverflow.com/a/5726311/10790010
uj5u.com熱心網友回復:
所有代碼都是用 PHP 撰寫的,您可以遞回搜索您的資料庫。
HTML 也是從 PHP 生成的,函式 CreateHtml 只適用于陣列。
您必須插入您的資料庫詳細資訊 USER = "" PASSWORD = HOST = "localhost" DATABASE = ""
<?php
function CreateHtmlElements($dom, $insertInto, $array)
{
foreach($array as $k=>$v)
{
//Use "?tagname" before a tag name
if (strpos($k, '?') !== false)
{
$str = substr($k, 1);
$elem = $dom->createElement($str, htmlentities($v));
foreach($array as $k2=>$v2)
{
if ($k2 != "" && strpos($k2, '?') === false)
{
//extend your array with functions use "fn"
if ($k2 == "fn")
{
foreach($v2 as $v3)
{
CreateHtmlElements($dom, $elem, $v3());
}
}
else if (!is_array($v2))
{
$elem->setAttribute($k2, $v2);
}
}
}
$insertInto->appendChild($elem);
$insertInto = $elem;
}
if (is_array($v))
{
CreateHtmlElements($dom, $insertInto, $v);
}
}
}
function CreateHtml($array)
{
$dom = new DOMDocument("1.0");
CreateHtmlElements($dom, $dom, $array);
echo $dom->saveHTML();
}
function DatabaseSearch($parent=0) {
$USER = "";
$PASSWORD = ;
$HOST = "localhost";
$DATABASE = "";
$CON = mysqli_connect($HOST, $USER, $PASSWORD, $DATABASE);
$sel ="SELECT * FROM demo WHERE parent_id=$parent";
$quer = mysqli_query($CON, $sel);
$row = mysqli_fetch_all($quer, MYSQLI_ASSOC);
return $row;
}
function CreateList($row) {
$a = array();
foreach($row as $k=>$v) {
$parent = $v['id'];
$a[] = array(
//Header
array(
"?div" => $v['name'],
"class" => "accordion",
"onclick" => "Accordion();",
"style" => "position: relative;",
),
//Accordion Body
array(
"?div" => "",
"class" => "panel",
"style" => "overflow-x: auto;",
CreateList(DatabaseSearch($parent)),
),
);
}
return $a;
}
echo "<!DOCTYPE html>";
CreateHtml(array(
"?html" => "",
"lang" => "en",
array(
"?head" => "",
array(
"?meta" => "",
"charset" => "utf-8",
),
array(
"?meta" => "",
"name" => "viewport",
"content" => "width=device-width, initial-scale=1.0",
),
array(
"?meta" => "",
"name" => "keywords",
"content" => "",
),
array(
"?meta" => "",
"name" => "description",
"content" => "",
),
array(
"?title" => "Demo",
),
array(
"?style" => "
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
margin-top: 2px;
margin-bottom: 2px;
padding: 15px;
border: none;
text-align: left;
transition: 0.4s;
border-radius: 2px;
box-shadow: 1px 1px 2px #333;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\\002B';
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: '\\2212';
}
.panel {
display: none;
padding: 10px;
background-color: white;
height: 0;
overflow: hidden;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
",
"type" => "text/css",
),
),
array(
"?body" => "",
array(
"?script" => "
function Accordion() {
var target = event.target;
target.classList.toggle('active');
var panel = target.nextElementSibling;
if (panel.style.display == 'block') {
panel.style.height = 0;
panel.style.display = 'none';
} else {
panel.style.display = 'block';
panel.style.height = '100%';
}
}
",
),
CreateList(DatabaseSearch()),
),
));
?>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/368593.html
