0


要实现这种效果的?应该怎么实现?求思路?前端应该怎么布局?数据应该怎么处理?

2个回答

0

已采纳

这个我以前做过。这个我想,有两种方案。第一种是 逐级加载,这种应该都会操作,结合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 三层循环 按顺序 类目就出来了!!!

0
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;
}

撰写答案