您好,欢迎访问一九零五行业门户网

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}]
回复内容: 一级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}]

效果如图
写的有点难看,不过不受限于数组的排序(不一定要按照级数递减),也不受限于3级。
其实这也就是一个递归的关系,贴下我项目中的代码吧:
/** * 获取树的树形的下拉列表数组 * @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(-,      ,$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); } } }
直接来个无限级分类的代码吧。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 + '
'; 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 版本以前写过,请直接戳这里,懒得复制了 _^_。
非常在意性能的话这种因为数量级不大可以考虑不用3级联动,加工一下,然后输入如下的option就行了。
首页
-首页
--首页
首页
就是根据id找归类,直接jq判断记载就好了
不邀自答,(考虑性能)私以为在数据根源入手是最有效直接的,来个数据库版的.
建表语句
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 namefrom tp_citystart with id
返回结果如下:
我们也可以这样写:
select sys_connect_by_path(name, '-') pathfrom tp_citystart with id
返回结果是:
其它类似信息

推荐信息