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

逃离我推掉我的手 2023-02-18 14:28 12阅读 0赞

### 文章目录 ###

*   *   *  前言
         *  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、normal
    				console.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

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

### 源码 ###

[功能代码查看][Link 1]

[点击查看全部源码][Link 2]

[Link 1]: https://github.com/ly641921791/layui-plus/commit/f0587608f9cb5fede86c6578feafa33ef9bec2cc
[Link 2]: https://github.com/ly641921791/layui-plus/tree/v2.5.6.plus