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): /// & ...
随机推荐
- Des与3Des加密解密
/// <summary> /// Des和3Des算法 /// </summary> public class Des { /// <summary> /// D ...
- 谢欣伦 - OpenDev原创例程 - 串口助手Comm Assist
前一段时间,一位博友发邮件给我.他跟我讲说没太看懂<化繁为简系列原创教程 - 通信专题 - 串口类CxComm的使用>,请我做一个DEMO工程给他.我抽了一天时间编写并上传了一个DEMO工 ...
- Microsoft JScript 运行时错误: 属性“$”的值为 null、未定义或不是 Function 对象
运行网站时有的页面中可能有的js代码不起作用,原因可能是 JQ引用错误!他找不到JQ的基类!你引用的是JQ的插件.程序是先找到JQ的基类才能去实现插件功能的.把JQ的基类放在所有插件的前面.这样就不会 ...
- [.net 面向对象程序设计进阶] (14) 缓存(Cache) (一) 认识缓存技术
[.net 面向对象程序设计进阶] (14) 缓存(Cache)(一) 认识缓存技术 本节导读: 缓存(Cache)是一种用空间换时间的技术,在.NET程序设计中合理利用,可以极大的提高程序的运行效率 ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- 【VC++技术杂谈001】音频技术之调节音量及设置静音
本文主要介绍如何使用混音器Mixer API函数实现系统音量调节,以及设置静音. 1.混音器的作用及结构 1.1混音器的作用 声卡(音频卡)是计算机进行声音处理的适配器,具有三个基本功能: (1)音乐 ...
- InstallShield2013 error 6109
InstallShield在没添加打包文件时是可以编译生成安装包的,在增加打包文件之后就报以下错误: ISEXP : error : -6109: Internal build error ISEXP ...
- C语言 · 送分啦
问题描述 这题想得分吗?想,请输出"yes":不想,请输出"no". 输出格式 输出包括一行,为"yes"或"no". ...
- eclipse中的javac命令与java命令
一.eclipse的javac命令:当eclipse对.java(源文件)文件进行保存操作时(快捷键ctrl+s),会执行javac命令.见上图,Default output folder(默认输出文 ...
- GitHub iOS-Top 100 简介
GitHub排名前100的iOS第三方汇总简介,方便开发者选择适合的第三方框架. 项目名称 项目信息 1. AFNetworking 作者是 NSHipster 的博主, iOS 开发界的大神级人物, ...