javascript - 根据下面数组怎么生成三级联动菜单树?(考虑性能)
黄舟
黄舟 2017-04-11 12:31:35
[JavaScript讨论组]

一级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}]

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(6)
天蓬老师

直接来个无限级分类的代码吧。

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);

最终输出效果如下:

广东
- - 广州
- - - - 白云
- - - - - - 景云路
湖北
- - 武汉
- - - - 江夏
深圳

PS:分隔符可以自定义。求路过大牛帮忙优化:arrayToTree() ^_^

PHP 版本

以前写过,请直接戳这里,懒得复制了 _^_。

天蓬老师

其实这也就是一个递归的关系,贴下我项目中的代码吧:

    /**
     * 获取树的树形的下拉列表数组
     * @param string $model 模型名称
     * @param int $m 点位符数量
     * @param string $pid 父级id
     * @param array field 字段名的数组
     */
    function dropdown_tree($model,$m=0,$pid=0,$field=array('id','sortname','parentid'))
    {    
        $model=$model."_model";
        $this->_CI->load->model($model);
        $class_arr=$this->_CI->$model->all();
        $return_arr=array();
        $this->dropdown_array($m,$pid,$class_arr,$return_arr,$field);
        return $return_arr;
    }

   /**
    * 遍历数组,修改其样式。
    */
    function dropdown_array($m,$pid,$class_arr,&$return_arr,$field){
        $n = str_pad('',$m,'-',STR_PAD_RIGHT);
        $n = str_replace("-","&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",$n);
        foreach($class_arr as $item){
            if($item["$field[2]"]==$pid){
                $return_arr[$item["$field[0]"]]=$n."|--".$item["$field[1]"];
                $this->dropdown_array($m+1,$item["$field[0]"],$class_arr,$return_arr,$field);
            }
        }
    }
天蓬老师

非常在意性能的话这种因为数量级不大可以考虑不用3级联动,加工一下,然后输入如下的Option就行了。
首页
-首页
--首页
首页

高洛峰
<?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); //输出
广东
__广州
____白云
__深圳
湖北
__武汉
PHP中文网

就是根据ID找归类,直接JQ判断记载就好了

高洛峰

我是这么写的,一般一级菜单肯定是省,不会做任何改变,所以生成一个省级的数组缓存
再生成以省份ID为key的城市数组缓存
最后再以城市ID为key生成对应的地区数组缓存
然后就是所有记录以ID为key的数组缓存。

通过地区,得到对应的市级地区,和省份
通过省份,得到对应的城市,再得到对应的地区
通过城市得到对应的城市所属省份的城市子集。。。。。。
基本上四个数组就可以搞定了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号