JS当中的无限分类递归树
列表转换成树形结构方法定义:
//javascript 树形结构
function toTree(data) {
// 删除 所有 children,以防止多次调用
data.forEach(function(item) {
delete item.children;
}); // 将数据存储为 以 id 为 KEY 的 map 索引数据列
var map = {};
data.forEach(function(item) {
// 在该方法中可以给每个元素增加其他属性
item.text = item.name;
map[item.id] = item;
});
// console.log(map); var val = [];
data.forEach(function(item) { // 以当前遍历项,的pid,去map对象中找到索引的id
var parent = map[item.pid]; // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
if (parent) {
// 可以给每个父节点添加属性
parent.iconCls = "i-folder";
// 添加到父节点的子节点属性中
(parent.children || (parent.children = [])).push(item); } else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
val.push(item);
}
});
return val;
}
树形结构数据:
var data = [
{
id:1,
name :"一级分类:1",
pid :0,
},
{
id:2,
name :"二级分类:1",
pid :1,
},
{
id:3,
name :"三级分类:3",
pid :2,
},
{
id:4,
name :"一级分类:2",
pid :0,
},
{
id:7,
name :"f级分类:2",
pid :4,
},
{
id:10,
name :"f级分类:2",
pid :7,
},
{
id:9,
name :"f级分类:2",
pid :10,
},
{
id:12,
name :"f级分类:2",
pid :9,
},
{
id:15,
name :"f级分类:2",
pid :12,
},
{
id:13,
name :"f级分类:2",
pid :15,
},
]
版权声明:本文为CSDN博主「花村大地主」的原创文章,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jayhkw/article/details/68945087
JS当中的无限分类递归树的更多相关文章
- 关于无限分类的树状输出(id,name,pid)类型的
首先创建无限分类的数据表,我这里采用的是id.name.pid这种类型(当然还有很多种无限分类的方式了,比如:id.name.pid.path.left.right左右节点的形式) CREATE TA ...
- javascript当中的无限分类
var data = [ {id:100000, name :"1", pid :0}, {id:100100, name :"1-1", pid :10000 ...
- php递归方法实现无限分类实例
数组: 代码如下 复制代码 $items = array( array('id' => 1, 'pid' => 0, 'name' => '一级11' ), array('id' ...
- PHP实现无限分类
PHP实现无限分类 无限分类 递归 无限级分类是一种设计技巧,在开发中经常使用,例如:网站目录.部门结构.文章分类.笔者觉得它在对于设计表的层级结构上面发挥很大的作用,比如大家在一些平台上面,填写邀请 ...
- 后台树状菜单,js实现递归无限分类
//新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...
- php递归无限分类、根据子类获取所有顶类
//递归无限分类树 public static function diGui($data, $pid) { $arr = collect([]); if (empty($data)) { return ...
- TreeView递归绑定无限分类数据
TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...
- php不用递归完成无限分类,从表设计入手完整演示过程
无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...
- 【整理】iview Tree数据格式问题,无限递归树处理数据
iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20
随机推荐
- Vagrant 手册之 Vagrantfile - 提示及技巧
原文地址 Vagrantfile 是一种非常灵活的配置格式.语法基于 Ruby,可以用它做很多事情.在本页使用一些提示和技巧时,请注意正确使用它们. 1. 使用循环定义虚拟机 如果你想对多机器应用稍微 ...
- poj1258Agri-Net(最小生成树)
题目链接:http://poj.org/problem?id=1258 Description Farmer John has been elected mayor of his town! One ...
- mysql的命令入门
mysql入门实践 学习教程 教程链接地址 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 文 ...
- Apache Commons 工具类介绍及简单使用(转载)
原文链接 http://www.cnblogs.com/younggun/p/3247261.html Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动 ...
- Tensorflow--Keras官方原文
Keras 是一个用于构建和训练深度学习模型的高阶 API(应用程序接口).它可用于快速设计原型.高级研究和生产,具有以下三个主要优势: 方便用户使用 Keras 具有针对常见用例做出优化的简单而一致 ...
- CentOS7没有ifconfig/route/arp/netstat等命令的解决方案
查看提供 ifconfig 命令的包 [root@bogon ~]# yum search ifconfig 这里选择安装net-tools包即可 [root@bogon ~]# yum instal ...
- Struts2之校验
##1.输入校验 错误提示页面 <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- Eclipse Kepler安装WST Server Adapter后创建Server无Tomcat解决方法
在Eclipse Kepler下安装完WST Server Adapter后,创建Server时发现没有Tomcat服务器的选项,这个问题解决起来很简单, 只需要安装一下JST Server Adap ...
- [Bzoj1047][HAOI2007]理想的正方形(ST表)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1047 题目虽然有一个n的限制,但求二维区间最值首先想到的还是RMQ,但是如果按照往常RM ...
- python-批量解压zip、rar文件
这是一个用python写解压大量zip脚本的说明,本人新手一个,希望能对各位有所启发. GitHub:https://github.com/lgf133214/Windows-python3- 首先要 ...