项目场景：

说起来layui前端框架，做后端开发的也是再熟悉不过了，模块开发，友好的UI界面，对前端后端人员都十分友好，当然，文档和示例也算是相当完备了。但是在开发项目时会遇到这样一种情况，就是想实现一种布局:左边是一个树，带有图标，右边展示表格。但是在layui组件中的树组件并不支持自定义图标，在百度上翻了很多的博客，也没有见到自己比较理想的，因此准备自己来扩展

解决方案：

1、下载layui源码

layui码云地址
克隆源码

 git clone https://gitee.com/sentsin/layui.git

打开layui目录

我们这里只用到src 和examples两个目录

2、分析树组件案列源码

2.1、找到树组件的案列源码，并打开

1、双击打开后，我们可以很明确一件事是，我们的图标是需要放在标题的前面，也就是图中蓝色方框的位置。
2、打开开发者工具，我们可以发现标题都拥有统一的样式layui-tree-txt,而图标就应该放在带有layui-tree-txt样式的span标签中。

2.2、打开树组件的源码

找到layui-tree-txt

可以发现这里的样式名用变量ELEM_TEXT来保存，因此我们要顺着源码来找ELEM_TEXT

在204行，我们找到了，span标签的生成函数。看源码span标签里面只可能包着的是标题，那么item.title就是标题，那么item就是传进来的对象，这下大致明了了。

return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</span>';

我们先试试创建一个i标签和item.icon

return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'"><i>'+item.icon+'</i>'+ (item.title || item.label || options.text.defaultNodeName) +'</span>';

修改案例文件，添加icon属性

打开页面tree.html

基本效果已经出来了
完善：
1、没有图标应该不展示，也不应该是undefined
2、现在只是文字，如果是真图标应该用iconfont来实现

3、完善组件扩展

3.1 undefined不展示

这里只是一个判断问题只要存在icon的配置就展示，如果不存在就不展示

return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'"><i>'+(item.icon||'')+'</i>'+ (item.title || item.label || options.text.defaultNodeName) +'</span>';

item.icon||’’，||是有阻断作用的，当item.icon存在时，不会执行后面，当item.icon不存在时，则会执行后面，运行tree.html

3.2 展示图标

iconfont-阿里巴巴矢量图标库
在图标库中添加，图标生成，下载代码

复制代码到examples下面的font目录

修改tree.js

 return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'"><i class="iconfont '+(item.icon||'')+'"></i>'+ (item.title || item.label || options.text.defaultNodeName) +'</span>';

tree.html中引入iconfont.css，修改tree数据

引入图标样式即可，运行tree.html

效果达成,其实这里还是差了一点

扩展图标也就是实现了，不用图标时，只要选择不设置icon属性或者为空就好！

感谢贤心，iconfont

扩展后的树形组件免积分

layui树组件(扩展为带有图标的layui树组件)相关推荐

IconCheckBoxPreference: 一个带有图标的CheckBox preference
这篇文章原文是在https://gist.github.com/515681.主要是代码,没有其他文字说明,转到这里来,希望对看到的人有用. 下面是用到的xml布局文件. <?xml versi ...
android popupmenu icon,带有图标的PopupMenu
否则我将实现它: 创建PopUpWindow布局: android:id="@+id/llSortChangePopup" android:layout_width="w ...
DLUX组件扩展下篇-实践
一.文章目标 1.1目标随着SDN技术的逐步成熟,大量的传统数通厂家和新型的IT厂家,都投入了一定的人员进行相关的产品技术预研.而ODL作为SDN控制器的主要开源项目,自然也成了多数人学习和搭建模拟 ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
layui选项卡嵌套选项卡_在ProtoPie中使用嵌套组件构建选项卡栏
layui选项卡嵌套选项卡 One of the powerful features of ProtoPie is the ability to build fully portable and in ...
千牛包表包下载_带有服务器端处理和VueJS组件的数据表包
千牛包表包下载 Vue数据表 (Vue Data Table) Data Table package with server-side processing and VueJS components. ...
省钱之道--图解域域树域林根域的含义
省钱之道--图解域域树域林根域的含义标签:域域林图解域域树域林根域的含义域树根域原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.ht ...
html树状图右侧_树状图及制作方法（Excel 2016/Excel 2013）
↑↑↑关注ExcelEasy,让Excel更简单树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法树状图在Exce ...
CSS/HTML 5简洁带图标的input日期选择器
CSS/HTML 5简洁带图标的input日期选择器说明 css代码 html代码演示效果图说明演示效果分辨率为1980x1080分辨率效果高度可定制修改纯css代码控制使用的input ...

layui树组件(扩展为带有图标的layui树组件)