Как я могу отобразить древовидную структуру в HTML из таблицы закрытия
Я храню некоторые иерархические данные в MySQL. По разным причинам я решил использовать таблицы замыканий (вместо вложенных множеств, списков смежности и т. П.). До сих пор он работал отлично для меня, но сейчас я пытаюсь выяснить, как на самом деле отобразить это дерево в HTML (то есть с правильными отступами).
В качестве примера, скажем, у меня есть дерево, как так...
- питание
- фрукты
- яблоки
- груши
- Овощи
- морковь
- фрукты
Мой стол "Еда" будет выглядеть так...
[ID] [PARENT_ID] [NAME]
1 0 Food
2 1 Fruits
3 1 Vegetables
4 2 Apples
5 2 Pears
6 3 Carrots
Моя таблица "Закрытие" будет выглядеть так...
[PARENT] [CHILD] [DEPTH]
1 1 0
2 2 0
3 3 0
4 4 0
5 5 0
6 6 0
1 2 1
1 3 1
1 4 2
1 5 2
1 6 2
2 4 1
2 5 1
3 6 1
Теперь мне интересно, как бы я мог правильно отобразить это в HTML, в идеале, как это...
<ul>
<li>Food
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
</ul>
</li>
</ul>
</li>
</ul>
... который будет отображать мое дерево в виде маркера, как это было в начале моего вопроса. В любом случае, любая помощь будет высоко ценится!
Чарльз
1 ответ
Вы можете использовать рекурсивный вызов функции.
PSEUDCODE (Abstruct):
function showTree(parent_id){
// retrive child ids from DB using given parent id
result = GetChildren(parent_id);
while(...){
child_id = result[...];
// Call this function itself
showTree(child_id);
}
}
PSEUDCODE (подробно):
function showTree( parent_id ){
/* Retrieve child records which has a relationship with the given parent id.*/
SQL = "SELECT * FROM Foods ( WHERE PARENT_ID = " + parent_id + ")";
results = executeSQL(SQL);
print "<ul>";
i = 0;
while(/*results has record*/){
row = results[i];
print "<li>" + row["NAME"] + "</li>";
/*
* Make a recursive call here.
* Hand out 'ID' as the parameter.
* This 'ID' will be received as 'PARENT_ID' in the function called here.
*/
call showTree(row["ID"]);
i = i +1;
}
print "</ul>";
}
/*
* Now start calling the function from top of the nodes.
*/
call showFoods( 0 ); // parameter '0' is the root node.
Я надеюсь, это поможет.