前台接收到的数据格式

var rows=[{
parent: 'root',
id: 'DC',
title: '集团'
},
{
parent: 'DC',
id: '01',
title: '上海本部'
},
{
parent: 'DC',
id: '02',
title: '中华企业'
},
{
parent: '02',
id: '0200',
title: '中华企业股份有限公司本部'
},
{
parent: '02',
id: '0201',
title: '上海古北(集团)有限公司'
},
{
parent: '0201',
id: '020100',
title: '上海古北(集团)有限公司本部'
},
{
parent: '0201',
id: '020101',
title: '上海古北顾村置业有限公司'
},
{
parent: '0201',
id: '020102',
title: '上海古北京宸置业发展有限公司'
},
{
parent: '0201',
id: '020103',
title: '苏州洞庭房地产发展有限公司'
}]
function listToTree(data, options) {

    options = options || {};
var ID_KEY = options.idKey || 'id';
var PARENT_KEY = options.parentKey || 'parent';
var CHILDREN_KEY = options.childrenKey || 'children'; var tree = [],
childrenOf = {};
var item,
id,
parentId; for (var i = 0, length = data.length; i < length; i++) {
item = data[i];
id = item[ID_KEY];
parentId = item[PARENT_KEY] || 0;
// every item may have children
childrenOf[id] = childrenOf[id] || [];
// init its children
item[CHILDREN_KEY] = childrenOf[id];
if (parentId != 0) {
// init its parent's children object
childrenOf[parentId] = childrenOf[parentId] || [];
// push it into its parent's children object
childrenOf[parentId].push(item);
} else {
tree.push(item);
}
}; return tree;
}

调用方法

var treeData=listToTree(rows);

技术交流QQ群:15129679

JavaScript 将行结构数据转化为树形结构,可提供给常用的tree插件直接使用(高效转化方案)的更多相关文章

  1. JavaScript 将行结构数据转化为树结构数据源(高效转化方案)

    js接收到后台的数据如下 /// 部门信息 var departRows = [{ parentDepartId: 'root', departId: 'DC', departName: '集团' } ...

  2. C# 把带有父子关系的数据转化为------树形结构的数据 ,以及 找出父子级关系的数据中里面的根数据Id

    紧接上一篇,将List<Menu>的扁平结构数据, 转换成树形结构的数据 返回给前端   ,   废话不多说,开撸! --------------------- 步骤: 1. 建 Menu ...

  3. 树形结构JSON的实现方法

    在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...

  4. vue.js与element-ui实现菜单树形结构

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法.借鉴文章链接在最底部. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如 ...

  5. Linux/Ubuntu tree 命令以树形结构显示文件夹目录结构

    1.安装命令工具 sudo apt-get -y install tree 2.可以查看关于tree命令的帮助信息 $ tree --help usage: tree [-adfghilnpqrstu ...

  6. JavaScript 构造树形结构的一种高效算法

    引言 我们经常会碰到树形数据结构,比如组织层级.省市县或者动植物分类等等数据.下面是一个树形结构的例子: 在实际应用中,比较常见的做法是将这些信息存储为下面的结构,特别是当存在1对多的父/子节点关系时 ...

  7. javascript将平行的拥有上下级关系的数据转换成树形结构

    转换函数 var Littlehow = {}; /** * littlehow 2019-05-15 * 平行数据树形转换器 * @type {{format: tree.format, sort: ...

  8. javascript通过递归改子节点数据-用于层级深度未知的树形结构

    最近在做这么个需求:树形结构,层级深度未知,一旦某个节点的状态是置灰的话,其所有子节点都要置灰. 方案一(数据库有值):如果数据库里置灰节点的所有子节点,值也都是"置灰",那后台取 ...

  9. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

随机推荐

  1. Revit Family API 添加材质参数设置可见性

    start //添加类型 void AddType(FamilyManager familyMgr, string name, double w, double d) {     FamilyType ...

  2. WCF技术我们应该如何以正确的方式去学习掌握

    一.WCF技术我该如何学习? 阿笨的回答是:作为初学者的我们,那么请跟着阿笨一起玩WCF吧,阿笨将带领大家如何以正确的姿势去掌握WCF技术.由于WCF技术知识点太多了,就纯基础概念性知识都可以单独出一 ...

  3. 在ASP.NET Web API中使用OData的单例模式

    从OData v4开始增加了对单例模式的支持,我们不用每次根据主键等来获取某个EDM,就像在C#中使用单例模式一样.实现方式大致需要两步: 1.在需要实现单例模式的导航属性上加上[Singleton] ...

  4. 工具:使用过的 API 文档生成工具

    背景 2012 年之前几乎没有为代码增加注释,当然,代码的命名也不见得合理(好的代码胜过面面俱到的注释),后来接触过一些开源框架,优秀的框架都有一个特点:文档和示例非常多,在后来的日子里,几乎会强制自 ...

  5. Fix "Drives are running out of free space" Error in SharePoint Health Analyzer

    前言 最近帮助用户做健康检查,用户发现事件查看器(EventView)里面有很多错误,有一个就是"Drives are running out of free space",而且每 ...

  6. linux的systemctl 命令用法 转

    目录 预热 管理单个 unit 查看系统上的 unit 管理不同的操作环境(target unit) 检查 unit 之间的依赖性 相关的目录和文件 systemctl daemon-reload 子 ...

  7. linux配置nginx

    相关命令: nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试ngin ...

  8. bat调用TexturePacker更新SpriteSheet

    一款游戏会用到很多图片资源,通常我们会使用TexturePacker工具进行图片的拼接.压缩,为了考虑性能问题,单个SpriteSheet的尺寸不会设置的太大(最大1024 * 1024),这样就可能 ...

  9. Spring Boot中application.yml与bootstrap.yml的区别(转载)

    说明:其实yml和properties文件是一样的原理,主要是说明application和bootstrap的加载顺序.且一个项目上要么yml或者properties,二选一的存在. Bootstra ...

  10. Android Studio导入项目的中文注释乱码解决方法

           在Android studio中,导入Android的项目后,容易出现项目文件的中文乱码,中文无法正常显示,变成了一些格子问号之类的,导致无法查看中文的注释,下面来看看导入项目和解决乱码 ...