layui.tree.js节点添加自定义图标

最新推荐文章于 2024-11-25 06:00:00 发布
原创 最新推荐文章于 2024-11-25 06:00:00 发布 · 5.4k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍如何在tree.js中为节点添加自定义图标。默认情况下，所有节点都使用文件图标，通过修改源码，可以在后台传入icon属性以实现个性化图标显示。

tree.js节点默认的图标都是layui-icon layui-icon-file文件图标，
在这里插入图片描述

，没有icon的属性，要想添加自定义图标，需要修改原生的trree.js源码，

在这里插入图片描述
修改内容
i class=“layui-icon layui-icon-file” 改为i class="’ + (r.icon || “layui-icon layui-icon-file”) + '"

在这里插入图片描述
后台传值的时候添加 属性icon的值
在这里插入图片描述

树形组件扩展版(图标)
12-23
组件，树形组件扩展图标设置
layui树组件(扩展为带有图标的layui树组件)
qq_38330707的博客
12-23 6620
项目场景： 说起来layui前端框架，做后端开发的也是再熟悉不过了，模块开发，有好的UI界面，对前端后端人员都十分友好，当然，文档和示例也算是相当完备了。但是在开发项目时会遇到这样一种情况，就是想实现一种布局:左边是一个树，带有图标，右边展示表格。但是在layui组件中的树组件并不支持自定义图标，在百度上翻了很多的博客，也没有见到自己比较理想的，因此准备自己来扩展 解决方案： 1、下载layui源码 layui码云地址 随意选择一个目录克隆源码 git clone https://gitee.com/s
Layui自定义tree树形组件的图标
雾林小妖的博客
11-20 929
自定义Layui框架中tree树形组件前面的图标。
Layui框架中自定义tree树形组件中的图标及自定义图标大小/自定义tree中的icon
最新发布
雾林小妖的博客
11-25 659
Layui框架中自定义tree树形组件中的图标及自定义图标大小/自定义tree中的icon
自定义Layui Tree的节点的操作图标
weixin_44581243的博客
04-24 1717
红框内就是支持的的操作，其中info是我自己添加的，使用layui-icon-file作为显示的图标。如果有其他需求，例如弹窗查看节点的信息，或者不喜欢图标的icon怎么办呢？这时就需要通过修改源码的方式来实现了。打开layui.js，搜索。这时候保存layui.js。打开使用tree的地方，
layui tree树组件添加图标
qq_39280563的博客
09-13 4008
先上效果图： layui版本2.6.5，使用layui自带的树组件。 首先，打开layui.js。搜索i class="layui-icon layui-icon-file"改为i class="'+ (r.icon || "layui-icon layui-icon-file") + '" 再然后，渲染树组件一定要开启手风琴模式accordion：true或者开启连线showLine：true。showLine如果为false会导致渲染不出来图标。 最后，修改自己的渲染数据，给配置ico...
自定义tree节点图标
Flex/Java爱好者
05-23 780
//测试文件:http://www.adobe.com/2006/mxml"    layout="absolute">        icon="assets/Cflocation.gif">         icon="assets/editor_bak.gif"/>         icon="assets/edittsk_tsk1.gif">            icon="as
tree.js不同级别显示不同的图标
DarkMoonSH的博客
09-25 560
tree默认图标添加三个add、update、del，有的业务最上级只允许添加下级不允许删除当前级别，最下级允许删除当前级别，不允许添加下级。 不同级别的图标不一样。原JS不支持。 要修改此内容需要找到 修改为 传入的Json传增加 forbid属性即可。默认的显示，给forbiddel:true代表禁止添加。界面就不会有删除图标按钮出现。 前提先要配置 , edit: ['add', 'del'] //操作节点的图标 ...
layui树形组件动态实现
chaotiantian的博客
05-29 1522
前台页面HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n
LayUI Tree 组件扩展实现（搜索功能，复选框，自定义节点图标，右击菜单）（附带源码）
qq_27532167的博客
04-09 1万+
最近项目选项前端技术选型选择了LayUI，没选到的是tree组件的功能实在太弱了，没办了，只能自己修改了源码，目前实现了以下功能，github还没有时间更新敬请期待。那我们来看看扩展功能吧： 一、扩展功能 1，增加了目录树的搜索功能 2，增加了目录树的复选框和事件回调的实现 3，增加了根节点图标和叶子图标自定义设置。 4，增加右键菜单和事件回调。 让我妈看一下效果图吧 搜索功能效果...
layui树组件取消选择父节点自动勾选所有子节点以及自定义节点图标
qq_44418737的博客
11-19 2233
layui树组件取消选择父节点自动勾选所有子节点以及自定义节点图标
layui使用自定义图标
xxtz0522的博客
04-30 4873
图标库：https://www.iconfont.cn/ 教程：https://fly.layui.com/jie/9149/
layui tree组件更改图标
weixin_45237135的博客
03-25 3434
文章目录更改源码更换代码传值 更改源码 找到 tree.js ，找到 <i class="layui-icon layui-icon-file"></i> 更换代码 把 class 里面的 layui-icon layui-icon-file 更改为 ' + (r.icon || "layui-icon layui-icon-file") + ' 更改前： <i class="layui-icon layui-icon-file"></i> 更改
Layui第三方Dtree的使用——简单记录
qq_20741133的博客
10-25 1万+
一、 最近使用layui做了个项目，由于合同额小，也不需要太多繁琐复杂的处理，于是前端选用的layui。但是用到layui的树时，layui对树支持的不太好，后来找到了Dtree这个第三方插件。 二、 官网：http://www.wisdomelon.com/DTreeHelper/ 里面有很多示例和使用帮助，我要实现的是，点一个input标签，然后打开一个树页面，选取一个节点，然后把选中的节点信...
在开发项目中如何使用layui的tree组件和 图标layui.iconPicker选择器组件
qq_41444226的博客
09-18 4416
官网链接：https://www.layui.com/doc/modules/tree.html 树形菜单可以帮助我们很好的进行分级数据展示，例如系统菜单、省级关系，上下级关系等等，那么layui的tree将是你的不二选择。如果你对这个组件感兴趣，请继续往下看！ 目录： 升级layui的版本为2.5（自行到layui官网进行下载，解压后放到你的项目对应文件夹即可） ...
layui图标拓展-自定义图标
覃福安的博客
05-17 4767
在前端开发过程中我们经常会遇到框架提供的图标不够用的情况，那就需要我们自己进行拓展了，自己弄过几次，但每次配置都会忽略一些小细节，写个备忘文章 配置流程： 1.下载矢量图标 2.导入图标文件 3.修改css 4.使用 一、下载矢量图标 https://www.iconfont.cn/ 进入阿里矢量库 选择自己喜欢的图标库或者直接搜索自己的喜欢的...
layer.tree 左侧菜单悬浮 样式 自定义 实现
非著名程序员
12-10 2004
悬浮效果是js动态生成的，会生成一个含有类layui-nav-bar的span标签，然后动态设置span的位置达成border-left的效果。可通过控制layui-nav-bar的样式来达到修改样式的效果 因为默认高度是0px，一旦你的菜单高度不是0px开始的话，可能鼠标悬浮不能精确定位，解决办法： 1.去掉悬浮效果，在本页面自定义 <style type="text/css"&g...
layui的动态树状图
qq_42864665的博客
09-02 3274
今天项目用到的layui的树状图 运行原理就是先查到全部的部门，然后有一个用于存储坐标对象的数组来记录具体位置 然后children.push进去，然后再去生成 缺点就是如果部门数量过大 运行会很缓慢 记录一下自己的进步 //树状图 layui.use([ ‘element’, ‘tree’, ‘layer’, ‘form’, ‘upload’ ], function()...
如何使用layui创建一个树形图
m0_57768599的博客
06-08 863
如何使用layui创建一个树形图
改造layui-树（tree）组件支持添加、编辑、删除的自定义（弹框）操作
热门推荐
liona_koukou的博客
08-20 2万+
新公司的项目用了layui，使用过程中踩了不少坑，大多来自tree组件，接下来如果有时间会一一码下来 layui的tree组件可以开启节点操作（添加、编辑、删除），用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互，这样一个添加操作要走两步：添加+编辑。而按照我们的代码习惯添加的接口走完之后我们会重新绘制树——tre...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值