js实现无限极分类
转载注明出处!!!
转载注明出处!!!
转载注明出处!!!
因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来做了。
不能说效率多高,只是说能实现了。
其实ACMer或者学过点算法和数据结构的应该知道这其实就是一个树,用数组存罢了,用数组存树的方法相信各位ACMer已经用的不要不要的了,所有并没有什么难度,知道思路就很好写了。
思路:获取到后台传来的数组dep,然后新建一个数组list,将dep遍历一遍,获取到每个节点的parentId,用parentId作为下标插入到list数组里面。
至此,构树完成。
接下来就是遍历了,我是采用递归遍历的,比较简洁,各位大神有什么更好的遍历方法也欢迎分享。
首先获取到根节点(也就是最顶级的那个分类)的下标,然后遍历这个下标中的每个节点的信息,并找出这个节点的id,然后重新传入递归函数即可。
下面是代码实现,注释依旧很清楚。相信应该能看懂,看不懂的多看几遍,照着码一遍应该就懂了。再不懂的,请照着程序走一遍应该就懂了。。要是....就转行吧。
- //无限极分类创建部门列表
- //递归创建无限极分类
- function createList(list,index)
- {
- //获取当前index节点的子节点的信息
- var tmp = list[index];
- var str = '';
- if(tmp)
- {
- str +='<ul style="display:none">';
- for(var i = 0; i < tmp.length; i++)
- {
- //获取id用来递归
- var id = tmp[i].id;
- str += '<li class="block border">';
- str += '<div class="weui_cell" href="javascript:;"><div class="weui_cell_bd weui_cell_primary"><a id = "'+ tmp[i].id+'" href = "http://www.baidu.com">'+tmp[i].name+'</a></div><div></div></div>';
- //递归
- str += createList(list,id);
- str += '</li>';
- }
- str += '</ul>';
- }
- return str;
- }
- //入口函数,dep为部门的信息数组,必须有的是id和parentid
- function createDownList(dep)
- {
- //初始化对象
- var list = {};
- var pid = '';
- //循环遍历数组,将数据放到对应的parentid下
- for(var i = 0; i < dep.length; i++)
- {
- //获取父节点下标
- pid = dep[i].parentid;
- //如果为定义,就定义为空数组
- if(!list[pid])
- {
- list[pid] = [];
- }
- //将当前节点信息加入到父元素中
- list[pid].push(dep[i]);
- }
- //排序,其实没有的话也行,我这里是为了确定某一个分类在当前兄弟分类的顺序
- for (var key in list) {
- list[key].sort(function(a, b) {
- return a.order > b.order ? 1 : -1;
- });
- }
- //传入根节点(也就是最顶级分类)的下标
- return createList(list,0);
- }
示例代码
js实现无限极分类的更多相关文章
- 无限极分类的JS实现
纯JS实现无限极分类 <!DOCTYPE html> <html> <head> <title></title>//引入Jquery < ...
- thinkphp5.0无限极分类及格式化输出
首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的p ...
- sqlalchemy tree 树形分类 无限极分类的管理。预排序树,左右值树。sqlalchemy-mptt
简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...
- PHP 商城无限极分类
无限极分类,用的是递归,在外部调用fen()方法即可 index是刚开始寻找的顶级分类,suo是为了在前端展示的时候缩进 ,$suo=){ 一个数组用来返回的 $t=[]; 这是查询数据库的所有内容 ...
- php无限极分类以及递归(thinkphp)
php无限极分类: 无限极分类重点在于表的设计: 1在model中: class CatModel extends Model{ protected $cat = array(); public fu ...
- C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现之方法二:加入缓存机制
在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Cachi ...
- PHP无限极分类
当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...
- PHP无限极分类,多种方法|很简单,这里说的很详细,其它地方说的很不好懂
当你学习php无限极分类的时候,大家都觉得一个字"难"我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一 ...
- C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现
今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了: 首先创建节点类(我给它取名:AdminUserTree): /// & ...
随机推荐
- php报表使用
php报表的使用: 1.到官网(http://jpgraph.net/)下载,建议下载jpgraph-3.0.7.tar.gz版本 2.解压后有两个文件夹 docportal:使用手册 src:报表核 ...
- nginx-(/usr/local/nginx/conf/nginx.conf)更改配置文件
user www www; worker_processes ; error_log /usr/local/nginx/logs/error.log info ; pid /var/run/nginx ...
- 在C#中使用消息队列RabbitMQ
1.什么是RabbitMQ.详见 http://www.rabbitmq.com/. 作用就是提高系统的并发性,将一些不需要及时响应客户端且占用较多资源的操作,放入队列,再由另外一个线程,去异步处理这 ...
- Win7网上邻居提示未授予用户在此计算机上的请求登录类型解决办法
内容简介 装了Win7之后很多人遇到这样的问题,网上邻居访问Win7的电脑时出现“未授予用户在此计算机上的请求登录类型”问题.打开“控制面板”--“管理工具”--“本地安全策略”--“本地策略 ...
- java学习笔记(3)之面向对象(1)
下面来谈谈我对面向对象的一些理解和总结. 1.什么叫面向对象?我自己的理解就是一种编程思想,强调对象,是一种思考问题的思维模式.在学习面向对象的时候,我们要建立起自己面向对象的思维模式. (1).先整 ...
- vue组件编译原理
<body> <my-com1 type="type" v-pre="pre">com1</my-com1> <my- ...
- “安装项目” Step By Step
目录 一 基本操作 二 定制安装对话框 三 安装程序类 四 总结 .NET程序集因为包含了元数据,所以程序集具有自描述性.多数程序自身包含了运行所需要的全部信息,这类程序集就是我们常说的“绿色软件”. ...
- 《Entity Framework 6 Recipes》中文翻译系列 (25) ------ 第五章 加载实体和导航属性之加载完整的对象图和派生类型上的导航属性
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-5 加载完整的对象图 问题 你有一个包含许多关联实体的模型,你想在一次查询中, ...
- PMO是什么?如何与其他部门协作配合提高项目成功率?
许多公司里,有许多IT项目,特别是在软件公司里,许多开发团队并没有运用灵敏开发来进行项目办理.在某些状况下,尤其在一些公司里IT不是很受注重的,只能作为一个事务支撑部分,灵敏团队面对的首要疑问,是缺少 ...
- Atitit.创业之uke团队规划策划 v9
Atitit.创业之uke团队规划策划 v9 Uke org prjAuthor撰写人:绰号:老哇的爪子( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努 ...