根据数组生成联动菜单树
一级Id为负数、parentId为空,二级parentId等于一级id,三级parentId等于二级id:
[{"name": "广东","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "广州","Id": 44,"parentId": -1},
{"name": "武汉","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44}]
- javacript:
<div id="result"></div>
<script>
var result = document.getElementById('result')
var arr = [
{"name": "广东","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "广州","Id": 44,"parentId": -1},
{"name": "武汉","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44}
]
var tree = {}
var count = 0
array2Object(arr, tree, null)
function array2Object (array, node, id) {
var storage = []
var newArray = []
var newNode, newId
for (var i = 0; i < array.length; i++) {
if (array[i].parentId === id) {
node[array[i].name] = {}
storage.push(i)
count++
} else {
newArray.push(array[i])
}
}
if (count !== arr.length) {
for (var i = 0; i < storage.length; i++) {
array2Object(newArray, node[array[storage[i]].name], array[storage[i]].Id)
}
} else {
object2Html(result, tree)
}
}
function object2Html (node, obj) {
var storage = []
var tpl = node.innerHTML + '<ul>'
for (var key in obj) {
tpl = tpl + '<li data-name="' + key + '">' + key + '</li>'
if (!isEmptyObject(obj[key])) {
storage.push({
name: key,
obj: obj[key]
})
}
}
tpl += '</ul>'
node.innerHTML = tpl
if (storage.length !== 0) {
for (var i = 0; i < storage.length; i++) {
object2Html(document.querySelector('li[data-name="' + storage[i].name + '"]'), storage[i].obj)
}
}
}
function isEmptyObject (obj) {
for (var key in obj) {
return false
}
return true
}
</script>
效果图:
- javascript(无限级)
var districts = [
{"name": "广东", "Id": 1, "parentId": 0},
{"name": "湖北", "Id": 2, "parentId": 0},
{"name": "广州", "Id": 3, "parentId": 1},
{"name": "武汉", "Id": 4, "parentId": 2},
{"name": "深圳", "Id": 5, "parentId": 0},
{"name": "白云", "Id": 6, "parentId": 3},
{"name": "江夏", "Id": 7, "parentId": 4},
{"name": "景云路", "Id": 8, "parentId": 6}
];
function arrayToTree(parentId) {
var temp = [];
for (var index in districts) {
if (districts[index].parentId == parentId) {
temp.push({
data: districts[index],
children: arrayToTree(districts[index].Id)
});
}
}
return temp;
}
function outputTree(items, depth) {
var str = '';
for (var index in items) {
/* repeat() 特性属于 ECMAScript 2015(ES6)规范 */
str += ' - - '.repeat(depth) + items[index].data.name + '<br/>';
if (items[index].children.length) {
str += outputTree(items[index].children, depth + 1);
}
}
return str;
}
var result = outputTree(arrayToTree(0), 0);
document.write(result);
效果如下:
广东
- - 广州
- - - - 白云
- - - - - - 景云路
湖北
- - 武汉
- - - - 江夏
深圳
- 数据库版
建表语句:
create table TP_CITY
(
Id NUMBER ,
name VARCHAR2(255),
parentId NUMBER
);
insert into tp_city values(-1,'广东', null);
insert into tp_city values(-2,'湖北', null);
insert into tp_city values(44,'广州', -1);
insert into tp_city values(58,'武汉', -2);
insert into tp_city values(12,'深圳', -1);
insert into tp_city values(741,'白云', 44);
比如使用oracle的层级查询
select lpad(' ', (level-1)*2, ' ')||name name
from tp_city
start with id<0 connect by parentId=prior Id;
返回结果如下:
也可以这样写:
select sys_connect_by_path(name, '-') path
from tp_city
start with id<0 connect by parentId=prior id;
返回结果
- PHP
<?php
header('Content-Type: text/plain; charset=utf-8');
$arr = array(
array('name' => '广东', 'id' => -1, 'pid' => null),
array('name' => '湖北', 'id' => -2, 'pid' => null),
array('name' => '广州', 'id' => 44, 'pid' => -1),
array('name' => '武汉', 'id' => 58, 'pid' => -2),
array('name' => '深圳', 'id' => 12, 'pid' => -1),
array('name' => '白云', 'id' => 741, 'pid' => 44),
);
function tree(array $arr, $pid = null, $i = '') {
foreach ($arr as $ele) {
if ($ele['pid'] === $pid) { //递归条件
$indent = ($ele['pid'] === null) ? $i : '__'.$i;
echo $indent.$ele['name']."\n";
tree($arr, $ele['id'], $indent); //递归,把当前ID当做父ID传参,还有缩进
}
}
}
tree($arr); //输出
广东
__广州
____白云
__深圳
湖北
__武汉
文章来自SF社区,本人只是做笔记:
答案来源 | 链接 |
---|---|
aryu | |
游梦惊园 | |
![]() | 凌晨消失の夏日 |
eechen |