分类: JavaScript开发

LayUI 官方树组件添加自定义按钮

文章目录[隐藏]

LayUI 官方 tree 组件默认只支持 add、update、del 三种操作按钮,开发过程中可能需要添加些其它操作按钮,例如上移、下移等,怎么最小侵入的实现这些功能呢

改造 tree.js

因为默认实现的逻辑只判断只要非 add、update 就按 del 处理,这样自定义添加的按钮响应逻辑肯定是有问题,先把这个改掉,对应 tree.js 中的 operate 方法,将最后的 else 分支修改为 else if ("del" == f),添加新分支

else {
    var w = r.operate && r.operate(g);
}

可以直接用了

在业务代码 tree.render 完成后任意添加按钮

$("#tree .layui-tree-pack").each(function(i, p) {
    var sets = $(p).children(".layui-tree-set");
    for(var j = 0; j < sets.length; j ++) {
        var s = sets[j];
        $(s).children(".layui-tree-entry")
            .children(".layui-tree-btnGroup")
            .append("<i class=\"layui-icon layui-icon-xxxx\" data-type=\"xxxx\"></i>");
    }
})

最后就是响应上面添加的 xxxx 操作,在 tree.render.operate 中按 obj.type 自行判断就可以了

Recent Posts

Docker 容器非 root 用户监听 80 端口

起因是基于 CentOS 的 …

2 年 之前

基于 Docker 定时打印文件

先说背景,喷墨打印机有个很大的…

3 年 之前

Java 运行时反射获取来自继承的泛型

背景 正常情况下 Java 的…

3 年 之前

Java 基于 ByteBuddy 重写系统当前时间

背景 一般单元测试时总会有些代…

3 年 之前

华硕 B450F-Gaming 主板 I211-AT 网卡驱动安装

事情起因是买了块华硕的 ROG…

3 年 之前

PHP 安装 Memcached 扩展

登录服务器挨步执行: # su…

4 年 之前