转载路径：http://www.php.cn/php-weizijiaocheng-353267.html
无限级树状图可以说是无限级栏目的一个显著特征，我们接下来就来看看两种不同的写法。
一.数据库设计
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
CREATE
TABLE
`bg_cate` (
`cate_Id`
int
(30) unsigned
NOT
NULL
AUTO_INCREMENT,
`cate_ParentId`
int
(30) unsigned
DEFAULT
'0'
,
`cate_Name`
varchar
(100)
NOT
NULL
,
`cate_Intro`
varchar
(500)
DEFAULT
NULL
,
`cate_Order`
int
(30) unsigned
DEFAULT
'0'
,
`cate_Icon`
varchar
(100)
DEFAULT
NULL
,
PRIMARY
KEY
(`cate_Id`)
) ENGINE=MyISAM
DEFAULT
CHARSET=utf8 AUTO_INCREMENT=34 ;
--
-- 导出表中的数据 `bg_cate`
--
INSERT
INTO
`bg_cate` (`cate_Id`, `cate_ParentId`, `cate_Name`, `cate_Intro`, `cate_Order`, `cate_Icon`)
VALUES
(4, 0,
'往事如风'
,
'记录往事'
, 0,
'icons/6.gif'
),
(5, 0,
'水煮三国'
,
'品位三国智慧'
, 0,
'icons/3.gif'
),
(2, 0,
'技术学习'
,
'平时学习的一些笔记，欢迎批评指正。'
, 0,
'icons/18.gif'
),
(3, 0,
'生活点滴'
,
'记录生活点滴'
, 0,
'icons/2.gif'
),
(6, 0,
'栀子花开'
,
'青春无限'
, 0,
'icons/8.gif'
),
(7, 0,
'假日休闲'
,
'悠闲、自在'
, 0,
'icons/24.gif'
),
(8, 2,
'html'
,
'html学习'
, 0,
'icons/1.gif'
),
(9, 2,
'css'
,
'css学习'
, 0,
'icons/1.gif'
),
(10, 2,
'php'
,
'php学习'
, 0,
'icons/18.gif'
),
(11, 10,
'php基础知识'
,
'php基础知识'
, 0,
'icons/1.gif'
),
(12, 10,
'oop'
,
'oop'
, 0,
'icons/1.gif'
),
(13, 10,
'php安全'
,
'讲述php安全'
, 0,
'icons/1.gif'
),
(14, 10,
'seagull framework'
,
'seagull framework'
, 0,
'icons/1.gif'
),
(15, 2,
'javascript'
,
'javascript学习'
, 0,
'icons/1.gif'
),
(16, 2,
'设计模式'
,
NULL
, 0,
'icons/1.gif'
),
(17, 2,
'软件工程'
,
'软件工程学习'
, 0,
'icons/1.gif'
),
(18, 3,
'厦门生活'
,
'厦门生活'
, 0,
'icons/8.gif'
),
(19, 3,
'大学生活'
,
'大学生活'
, 0,
'icons/8.gif'
),
(20, 3,
'童年生活'
,
'童年生活'
, 0,
'icons/15.gif'
),
(21, 19,
'学习'
,
'学习'
, 0,
'icons/1.gif'
),
(22, 19,
'运动'
,
'运动'
, 0,
'icons/16.gif'
),
(23, 19,
'旅游'
,
'旅游'
, 0,
'icons/24.gif'
),
(24, 22,
'排球'
,
'排球'
, 0,
'icons/9.gif'
),
(25, 22,
'篮球'
,
'篮球'
, 0,
'icons/9.gif'
),
(26, 22,
'羽毛球'
,
'羽毛球'
, 0,
'icons/9.gif'
),
(27, 22,
'乒乓球'
,
'乒乓球'
, 0,
'icons/9.gif'
);
|
二.到数据库取数据，放到数组。
|
1
2
3
4
5
6
7
|
require_once
'./classes/MyDB.php'
;
$con = MyDB::singleton();
$sql = <<<SQL
select
*
from
bg_cate cate
SQL;
$data = $con->getAll($sql);
//print_r($data);
|
数据库操作我用的是pear类库。
最后的$data的数据格式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
Array
(
[0] => Array
(
[cate_Id] => 4
[cate_ParentId] => 0
[cate_Name] => 往事如风
[cate_Intro] => 记录往事
[cate_Order] => 0
[cate_Icon] => icons/6.gif
)
[1] => Array
(
[cate_Id] => 5
[cate_ParentId] => 0
[cate_Name] => 水煮三国
[cate_Intro] => 品位三国智慧
[cate_Order] => 0
[cate_Icon] => icons/3.gif
)
|
三.把上一步的数据转为树型状的数组
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function
getTree(
$data
,
$pId
)
{
$tree
=
''
;
foreach
(
$data
as
$k
=>
$v
)
{
if
(
$v
[
'cate_ParentId'
] ==
$pId
)
{
//父亲找到儿子
$v
[
'cate_ParentId'
] = getTree(
$data
,
$v
[
'cate_Id'
]);
$tree
[] =
$v
;
//unset($data[$k]);
}
}
return
$tree
;
}
$tree
= getTree(
$data
, 0);
|
最后输出$tree的数据格式为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
Array
(
[0] => Array
(
[cate_Id] => 4
[cate_ParentId] =>
[cate_Name] => 往事如风
[cate_Intro] => 记录往事
[cate_Order] => 0
[cate_Icon] => icons/6.gif
)
[1] => Array
(
[cate_Id] => 5
[cate_ParentId] =>
[cate_Name] => 水煮三国
[cate_Intro] => 品位三国智慧
[cate_Order] => 0
[cate_Icon] => icons/3.gif
)
[2] => Array
(
[cate_Id] => 2
[cate_ParentId] => Array
(
[0] => Array
(
[cate_Id] => 8
[cate_ParentId] =>
[cate_Name] => html
[cate_Intro] => html学习
[cate_Order] => 0
[cate_Icon] => icons/1.gif
)
|
四.把树型状数组转为html
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function
procHtml(
$tree
)
{
$html
=
''
;
foreach
(
$tree
as
$t
)
{
if
(
$t
[
'cate_ParentId'
] ==
''
)
{
$html
.=
"<li>{$t['cate_Name']}</li>"
;
}
else
{
$html
.=
"<li>"
.
$t
[
'cate_Name'
];
$html
.= procHtml(
$t
[
'cate_ParentId'
]);
$html
=
$html
.
"</li>"
;
}
}
return
$html
?
'<ul>'
.
$html
.
'</ul>'
:
$html
;
}
echo
procHtml(
$tree
);
|
输出的html的代码格式为：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
ul
>
<
li
>往事如风</
li
>
<
li
>水煮三国</
li
>
<
li
>技术学习
<
ul
>
<
li
>html</
li
>
<
li
>css</
li
>
<
li
>php
<
ul
>
<
li
>php基础知识</
li
>
<
li
>oop</
li
>
<
li
>php安全</
li
>
|
五.代码整合
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function
getTree(
$data
,
$pId
)
{
$html
=
''
;
foreach
(
$data
as
$k
=>
$v
)
{
if
(
$v
[
'cate_ParentId'
] ==
$pId
)
{
//父亲找到儿子
$html
.=
"<li>"
.
$v
[
'cate_Name'
];
$html
.= getTree(
$data
,
$v
[
'cate_Id'
]);
$html
=
$html
.
"</li>"
;
}
}
return
$html
?
'<ul>'
.
$html
.
'</ul>'
:
$html
;
}
echo
getTree(
$data
, 0);
|
六.增加CSS样式
第二种是从开源网站上看到的，非常非常的简介。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
<?php
function
genTree5(
$items
) {
foreach
(
$items
as
$item
)
$items
[
$item
[
'pid'
]][
'son'
][
$item
[
'id'
]] = &
$items
[
$item
[
'id'
]];
return
isset(
$items
[0][
'son'
]) ?
$items
[0][
'son'
] :
array
();
}
/**
* 将数据格式化成树形结构
* @author Xuefen.Tong
* @param array $items
* @return array
*/
function
genTree9(
$items
) {
$tree
=
array
();
//格式化好的树
foreach
(
$items
as
$item
)
if
(isset(
$items
[
$item
[
'pid'
]]))
$items
[
$item
[
'pid'
]][
'son'
][] = &
$items
[
$item
[
'id'
]];
else
$tree
[] = &
$items
[
$item
[
'id'
]];
return
$tree
;
}
$items
=
array
(
1 =>
array
(
'id'
=> 1,
'pid'
=> 0,
'name'
=>
'江西省'
),
2 =>
array
(
'id'
=> 2,
'pid'
=> 0,
'name'
=>
'黑龙江省'
),
3 =>
array
(
'id'
=> 3,
'pid'
=> 1,
'name'
=>
'南昌市'
),
4 =>
array
(
'id'
=> 4,
'pid'
=> 2,
'name'
=>
'哈尔滨市'
),
5 =>
array
(
'id'
=> 5,
'pid'
=> 2,
'name'
=>
'鸡西市'
),
6 =>
array
(
'id'
=> 6,
'pid'
=> 4,
'name'
=>
'香坊区'
),
7 =>
array
(
'id'
=> 7,
'pid'
=> 4,
'name'
=>
'南岗区'
),
8 =>
array
(
'id'
=> 8,
'pid'
=> 6,
'name'
=>
'和兴路'
),
9 =>
array
(
'id'
=> 9,
'pid'
=> 7,
'name'
=>
'西大直街'
),
10 =>
array
(
'id'
=> 10,
'pid'
=> 8,
'name'
=>
'东北林业大学'
),
11 =>
array
(
'id'
=> 11,
'pid'
=> 9,
'name'
=>
'哈尔滨工业大学'
),
12 =>
array
(
'id'
=> 12,
'pid'
=> 8,
'name'
=>
'哈尔滨师范大学'
),
13 =>
array
(
'id'
=> 13,
'pid'
=> 1,
'name'
=>
'赣州市'
),
14 =>
array
(
'id'
=> 14,
'pid'
=> 13,
'name'
=>
'赣县'
),
15 =>
array
(
'id'
=> 15,
'pid'
=> 13,
'name'
=>
'于都县'
),
16 =>
array
(
'id'
=> 16,
'pid'
=> 14,
'name'
=>
'茅店镇'
),
17 =>
array
(
'id'
=> 17,
'pid'
=> 14,
'name'
=>
'大田乡'
),
18 =>
array
(
'id'
=> 18,
'pid'
=> 16,
'name'
=>
'义源村'
),
19 =>
array
(
'id'
=> 19,
'pid'
=> 16,
'name'
=>
'上坝村'
),
);
echo
"<pre>"
;
print_r(genTree5(
$items
));
print_r(genTree9(
$items
));
//后者输出格式，前者类似，只是数组键值不一样，不过不影响数据结构
/*
Array
(
[0] => Array
(
[id] => 1
[pid] => 0
[name] => 江西省
[son] => Array
(
[0] => Array
(
[id] => 3
[pid] => 1
[name] => 南昌市
)
[1] => Array
(
[id] => 13
[pid] => 1
[name] => 赣州市
[son] => Array
(
[0] => Array
(
[id] => 14
[pid] => 13
[name] => 赣县
[son] => Array
(
[0] => Array
(
[id] => 16
[pid] => 14
[name] => 茅店镇
[son] => Array
(
[0] => Array
(
[id] => 18
[pid] => 16
[name] => 义源村
)
[1] => Array
(
[id] => 19
[pid] => 16
[name] => 上坝村
)
)
)
[1] => Array
(
[id] => 17
[pid] => 14
[name] => 大田乡
)
)
)
[1] => Array
(
[id] => 15
[pid] => 13
[name] => 于都县
)
)
)
)
)
[1] => Array
(
[id] => 2
[pid] => 0
[name] => 黑龙江省
[son] => Array
(
[0] => Array
(
[id] => 4
[pid] => 2
[name] => 哈尔滨市
[son] => Array
(
[0] => Array
(
[id] => 6
[pid] => 4
[name] => 香坊区
[son] => Array
(
[0] => Array
(
[id] => 8
[pid] => 6
[name] => 和兴路
[son] => Array
(
[0] => Array
(
[id] => 10
[pid] => 8
[name] =>
东北林业大学
)
[1] => Array
(
[id] => 12
[pid] => 8
[name] =>
哈尔滨师范大学
)
)
)
)
)
[1] => Array
(
[id] => 7
[pid] => 4
[name] => 南岗区
[son] => Array
(
[0] => Array
(
[id] => 9
[pid] => 7
[name] => 西大直街
[son] => Array
(
[0] => Array
(
[id] => 11
[pid] => 9
[name] =>
哈尔滨工业大学
)
)
)
)
)
)
)
[1] => Array
(
[id] => 5
[pid] => 2
[name] => 鸡西市
)
)
)
)*/
|