基于JavaScript实现树形下拉框


Posted in Javascript onAugust 10, 2016

平时会经常遇到树形结构的问题,比如显示目录结构等。

大多数情况下后台会返回这样的数据,如下:

[
{ id: 19, pid: 0, name: 'nodejs' },
{ id: 20, pid: 19, name: 'express' },
{ id: 21, pid: 19, name: 'mongodb' },
{ id: 60, pid: 20, name: 'ejs' },
{ id: 59, pid: 0, name: '前端开发' },
{ id: 70, pid: 59, name: 'javascript' },
{ id: 71, pid: 59, name: 'css' },
{ id: 72, pid: 59, name: 'html' },
{ id: 73, pid: 59, name: 'bootstrap' },
{ id: 61, pid: 0, name: '视觉设计' },
{ id: 63, pid: 61, name: '网页设计' },
]

这种数据结构后台容易处理,但是前台不好处理,需要首先将其转成树形json数据,如下:

[
{ id: 19, pid: 0, name: 'nodejs',
 children:[
   { id: 20, pid: 19, name: 'express',children:[{ id: 60, pid: 20, name: 'ejs' }]},
   { id: 21, pid: 19, name: 'mongodb' }
   ]
},
{ id: 59, pid: 0, name: '前端开发',
 children:[
  { id: 70, pid: 59, name: 'javascript' },
  { id: 71, pid: 59, name: 'css' },
  { id: 72, pid: 59, name: 'html' },
  { id: 73, pid: 59, name: 'bootstrap' }
   ]
},
{ id: 61, pid: 0, name: '视觉设计',children:[{ id: 63, pid: 61, name: '网页设计' }]},
]

这样就可以很方便的是用递归构建树形的组件。

如果后台能够直接返回这种结构最好,不然前台需要做转换。

一、将list数组结构的数据转成tree结构json

//list 转成树形json
function listToTree(list,pid) {
var ret = [];//一个存放结果的临时数组
for(var i in list) {
if(list[i].pid == pid) {//如果当前项的父id等于要查找的父id,进行递归
 list[i].children = listToTree(list, list[i].id);
 ret.push(list[i]);//把当前项保存到临时数组中
}
}
return ret;//递归结束后返回结果
}

var tree=listToTree(list,0);//调用函数,传入要转换的list数组,和树中顶级元素的pid

console.log(tree);

二、根据tree结构json数据生成下拉框

//在网页中添加下拉框容器
<select id="selectbox" name=""></select>
//js脚本,递归生成
//获取容器对象
var selectbox=document.getElementById("selectbox");

//生成树下拉菜单
var j="-";//前缀符号,用于显示父子关系,这里可以使用其它符号
function creatSelectTree(d){
 var option="";
 for(var i=0;i<d.length;i++){
 if(d[i].children.length){//如果有子集
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
 j+="-";//前缀符号加一个符号
  option+=creatSelectTree(d[i].children);//递归调用子集
 j=j.slice(0,j.length-1);//每次递归结束返回上级时,前缀符号需要减一个符号
  }else{//没有子集直接显示
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
  }
  }
 return option;//返回最终html结果
 }

//调用函数,并将结构出入到下拉框容器中
selectbox.innerHTML=creatSelectTree(tree);

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 内存释放问题
Apr 25 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JavaScript中this详解
Sep 01 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
关于原生js中bind函数的简单实现
Aug 10 #Javascript
Mvc提交表单的四种方法全程详解
Aug 10 #Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 #Javascript
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 #Javascript
Three.js学习之网格
Aug 10 #Javascript
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
js data日期初始化的5种方法
2013/12/29 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
深入理解Django-Signals信号量
2019/02/19 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python创建数字列表的示例
2019/11/28 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python计算导数并绘图的实例
2020/02/29 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
旅游项目开发策划书
2014/01/18 职场文书
代理协议书
2014/04/22 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS