layui源码详细分析之树形菜单
2017-08-10 19:28
239 查看
前言
今天分析的是layui框架内置模块tree.js,该模块的功能是构建树形菜单,具体的形式(layui官网该模块的具体形式)如下:自实现树形菜单
使用html+css+js实现了树形菜单,具体的实现思路如下:html中定义包含树形菜单的容器节点
规划好树形菜单的样式以及图标
使用js构建html结构以及绑定事件,实现树形菜单的点击折叠
实现效果图如下:
核心的实现是构建html结构,组织树状结构的数据,使用递归构建树,在本次实现中html的组织有两种形式,具体如下所述:
- 子菜单和父菜单逻辑上形成父子关系,结构上是分离的
- 子菜单和父菜单逻辑以及机构上都是父子关系
在刚一开始,我实际上是实现的第一种形式的,该形式的html结构体现如下:
<ul> <li>菜单1</li> <ul> <li>子菜单1</li> <li>子菜单2</li> </ul> </ul>
后来又补充了下一种形式的(这种更常见),该形式的html结构体现如下:
<ul> <li> <span>菜单1</span> <ul> <li>子菜单1</li> <li>子菜单2</li> </ul> </li> </ul>
递归形成树形菜单结构的代码如下(第二种形式):
tool.menuView = function(parentNode, menu) { if (!parentNode || parentNode.nodeType !== 1 || !Array.isArray(menu)) return; for (let i = 0; i < menu.length; i++) { let option = menu[i], name = option.name, children = option.children, liNode = tool.createElement('li'); tool.append(parentNode, liNode); if (children && children.length > 0) { let ulNode = tool.createElement('ul'); tool.menuView(ulNode, children); let [iNode, spanNode] = tool.createElement(['i', 'span']) spanNode.innerText = name; iNode.className = 'fa fa-play'; tool.append([liNode, parentNode, liNode], [[iNode, spanNode], [liNode], [ulNode]]); } else { liNode.innerText = name; } } };
需要传入的数据形式如下:
data = [ { name: '菜单1', children: [ { name: '子菜单1' }, { name: '子菜单2 } ] } ];
构建树形结构是关键的一步,之后就是对交互的处理,该模块的具体代码组织如下图:
本次实现较大的缺点:
可扩展性不强,对于树形菜单的css样式没有考虑作为模块来调用的形式,传入的容器id写死了(css样式)
下面来分析下layui内置的tree.js模块的具体实现以及模块代码组织结构,tree.js的代码组织如下图所示:
基本的使用形式是:layui.tree(options),简洁易用。该内置模块内容使用JQuery,对于树形结构的形成同样是采用递归形式生成,不过该内置模块还提供皮肤模式的选择等,对于扩展性等方面非常不错。
该内置模块的源码详细注释以及自实现demo一如既往会上传到我的Github上,每天都要接触新的知识点,将知识变为自己的永远是最好的。
致远方的你我
相关文章推荐
- layui源码详细分析系列之流加载模块
- layui源码详细分析系列之模块加载机制
- layui源码详细分析系列之富文本编辑器模块
- layui源码详细分析系列之文件上传模块
- layui源码详细分析系列之模板引擎
- mapreduce任务执行过程详细分析--源码级分析
- 史上最详细的LinkedHashMap详解--源码分析
- NandFlash驱动源码详细分析
- vue 源码深入学习分析——史上超详细
- druid 源码分析与学习(含详细监控设计思路的彩蛋)
- 深入理解Glide源码,分析之路(二):Glide的执行流程,史上最详细、易懂
- [Android源码分析]从spec角度来详细分析inquiry command带来的影响
- 树形菜单文档 - layui.tree-示例
- 仿iOS 7后台侧边菜单源码分析和总结
- layui框架详细分析系列之框架主体组织结构
- 瀑布流StaggeredGridView源码详细分析
- ArrayList 源码详细分析
- 第二人生的源码分析(九十一)LLScrollListCtrl列表的详细绘制
- Android:这是一份全面 &amp; 详细的Retrofit 2.0 源码分析指南
- 第二人生的源码分析(100)雷达地图详细显示