layui 树形组件（tree）支持双击事件

文章目录

前言
webjar方式引入
通过文件引入
通过源码编译
源码

前言

在使用layui v2.5.6 时，发现树形组件存在一些功能的缺失，比如没有双击事件，网上并没有具体的解决方案，看了一些使用layui的项目，都引入其他树形组件进行替换，个人感觉原生组件的样式与框架更适合，所以对其功能进行了增加，下面直接讲用法。

webjar方式引入

设置maven仓库

    <repositories><repository><id>rdc-releases</id><url>https://repo.rdc.aliyun.com/repository/130254-release-UtHk7a/</url></repository><repository><id>rdc-snapshots</id><url>https://repo.rdc.aliyun.com/repository/130254-snapshot-X1tQyc/</url></repository></repositories>

替换layui依赖

        <dependency><groupId>org.webjars.bowergithub.jaychoufans</groupId><artifactId>layui-plus</artifactId><version>2.5.6-SNAPSHOT</version></dependency>

添加双击事件

       tree.render({elem: treeSelector,id: treeId,data: bootTypes,dblclick: function (obj) {console.log(obj.data); //得到当前点击的节点数据console.log(obj.state); //得到当前节点的展开状态：open、close、normalconsole.log(obj.elem); //得到当前节点元素}});

用法类似 click 事件

功能稳定，打包为快照版本，是为了其他功能的优化考虑

通过文件引入

地址：https://github.com/JayChouFans/layui-plus/tree/v2.5.6

拉取代码，layui文件夹为修改后全部文件

通过源码编译

源码地址：https://github.com/ly641921791/layui-plus/tree/v2.5.6.plus

拉取代码，搭建环境，进行编译，环境搭建方法省略

源码

功能代码查看

点击查看全部源码

layui 树形组件（tree）支持双击事件相关推荐

LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
来了老弟，Layui树形菜单tree
咳咳,大家都叫我万恶的小编. 关于树形菜单这方面layui也是有着一个独立的模块(Tree)的.之前貌似是把这个模块给下下去了的(至于为啥的话小编也就不知道了),在2.5版本的时候才被作者贤心给重新加 ...
Element tree树组件鼠标双击事件
需求双击 tree上的子节点,把节点文字显示在输入框中(这里简化一下,双击 tree 显示文字即可,省略 $emit 那一步) 注解:props 可以接收 defaultExpandAll(是否默认 ...
element-ui中tree组件双击事件的实现
文章目录前言代码实现总结前言近期,笔者项目中遇到一个需求:实现左侧设备树(基于elment-ui tree组件)双击事件.查看element-ui官网后发现,element-ui中tree组 ...
Layui树形表格组件的实现
效果图: 一.Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用. // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 ...
el tree 双击事件
场景 Cesium中双击飞到对应图层位置方案方法1 参考:https://blog.csdn.net/q469731241/article/details/107356605/ <el-tr ...
layui树形美化_Layui树形组件
Layui树形组件文档 - layui.tree layuiAdmin 管理员 iframe 框 layui.config({ base: '../layuiadmin/' //静态资源所在路径 }) ...
layui 勾选不联动父项树形控件_layui树形组件重现勾选过程的办法
layui提供了两种初始化节点选中状态的方式一 tree.setChecked('demoId', [2,13,18,19]); //批量勾选 id 为2,13,18,19 的节点其中19是用户真 ...
手机端用单击事件模拟双击事件
手机app虽然不支持双击事件,但是支持单击事件: 用单击事件实现双击 <button id="btn"></button> <script src=& ...