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 自行判断就可以了

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注