Heim > Fragen und Antworten > Hauptteil
仅有的幸福2017-05-16 13:12:38
这个我以前做过。这个我想,有两种方案。第一种是 逐级加载,这种应该都会操作,结合ajax。第二种就是一次性加载,这种方式步骤:
1,查询所有的类目(类目的数据库要创建好,子类需要有一个parent_id字段,还需要第几级的字段,暂且叫level--深度)
2,找到level的最大值
3,通过3层的foreach循环,最外层的循环次数就是level的最大值,最里面的两层是核心,最里层的循环任务就是,把类目赋值到父类目的数组里面,比如:
array(
0=>array('一级类目','一级子类目')
1=>array('一级类目2','一级子类目')
}
一级子类目就是二级类目了(这个可以通过深度得知),插入到新的数组之后,记得及时清理元素组中的当前数组。
注:里面两层,第一层是按顺序循环所有层级的类目,第二层就是负责把子类目放到父类目的数组里面。
最后生成的数组的结果是:
一级类目1
-------二级类目1
-------二级类目2
-------------三级类目1
-------------三级类目2
一级类目2
-------二级类目1
接下里,在前端页面里,循环,也是一层一层地,这个时候还是需要level 三层循环 按顺序 类目就出来了!!!
怪我咯2017-05-16 13:12:38
json数据结构
{
data:[{// 一级菜单
id:1,
level:1,
pid:0 // 父级id,因为是一级菜单,所以为0
menu:[{ // 二级菜单
id:2,
level:2,
pid:1, // 父级id,因为是二级菜单,所以为上一层菜单的id
menu:[{ // 三级菜单
id:4,
level:3,
pid:2 // 父级id,因为是三级菜单,所以为上一层菜单的id
}
},{
id:3,
level:2,
pid:1 // 父级id,因为是二级菜单,所以为上一层菜单的id
},...{}]
},...,{}]
}
前端使用递归来遍历这个json数据:
function handleData(data,arr){
var newArr = arr || [];
data.forEach(function(item,index){
newArr.push(item);
if(item.menu){
handleData(item.menu,newArr);
}
});
return newArr;
}