layui源码详细分析之树形菜单
来源:互联网 发布:阿里云专有网络配置 编辑:程序博客网 时间:2024/05/24 23:15
前言
今天分析的是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上,每天都要接触新的知识点,将知识变为自己的永远是最好的。
阅读全文
0 0
- layui源码详细分析之树形菜单
- layui源码详细分析系列之模块加载机制
- layui源码详细分析系列之文件上传模块
- layui源码详细分析系列之富文本编辑器模块
- layui源码详细分析系列之模板引擎
- layui源码详细分析系列之element模块以及自定义事件机制
- layui源码详细分析系列之流加载模块
- layui框架详细分析系列之框架主体组织结构
- layui框架详细分析系列之熟悉框架以及提供的页面元素
- JavaScript之树形菜单
- layui树形结构
- UBOOT源码详细分析之主Makefile
- Tomcat源码分析之ClassLoader部分的设计详细分析
- Tomcat源码分析之ClassLoader部分的设计详细分析
- layui动态添加下拉菜单
- g723源码详细分析(-)
- g723源码详细分析(-)
- DownloadProvider 源码详细分析
- PowerDesigner设置
- Bellovin
- 信息论实验-称硬币
- 利用JScript实现简单的表格操作
- C#消息队列(MQ)零基础从入门到实战演练
- layui源码详细分析之树形菜单
- WIFI开关用例(UIAutomator+python+Android)
- 【Quartz】定时任务(一)——Quartz.NET使用
- 实现lastindexof函数
- popwindow 在安卓7.0上显示位置错误以及在6.0下点击外部不能消失的情况解析
- bzoj 4627 回转寿司(权值线段树)
- linux-4-sendmail
- const关键字的作用
- 《探索推荐引擎内部的秘密》