基于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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
js实现炫酷光感效果
Sep 05 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
关于原生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查询域名状态whois的类
2006/11/25 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php显示时间常用方法小结
2015/06/05 PHP
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Django的models中on_delete参数详解
2019/07/16 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
自学python用什么系统好
2020/06/23 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
python 安全地删除列表元素的方法
2022/03/16 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL