layui 树状控件tree优化

先上效果图:
layui 树状控件tree优化_第1张图片

我选的组件是这个:
layui 树状控件tree优化_第2张图片

动态渲染完后,分别在窗体加载完成,节点点击事件分别加入js:

        //侧边栏图标替换
        //layui-icon-subtraction
        $(function () {

            $(".layui-icon-file").addClass("backs");
            $(".backs").removeClass("layui-icon-file");
            $(".backs").append(``);

            $(".layui-tree-icon").addClass("layui-trees-btn-icon");
            $(".layui-trees-btn-icon").removeClass("layui-tree-icon");

            $(".layui-icon-addition").addClass("layui-icon-addition:before");
            //$(".layui-icon-tion").removeClass("layui-icon-addition");
            $(".layui-icon-tion").append(``);
            $(".layui-tree-txt").css("font-size", "16rem");

            $(".layui-icon-subtraction").addClass("layui-icon-sub");
            $(".layui-icon-sub").removeClass("layui-icon-subtraction");
            $(".layui-icon-sub").removeClass("layui-icon-addition");
            $(".layui-icon-sub").append(``);

            $(".layui-tree-lineExtend").attr("style", "display: block; line-height: 25rem; font-size: 15rem;");
            $(".layui-tree-entry").attr("style", "margin: 11% 0;font-size: 16rem;");

            $(".layui-tree-set").addClass("layui-tree-setLineShort");
            $(".layui-tree-setLineShort").removeClass("layui-tree-set");
        });

        $(document).on('click', '.layui-icon-tion', function (d) {
            //layui-icon-subtraction
            //layui-icon-addition:before
            $(".layui-icon-addition").addClass("layui-icon-addition:before");


        });

        $(document).on('click', '.layui-icon-sub', function () {
            $(".layui-icon-addition").addClass("layui-icon-addition:before");
        });

css:

        .layui-icon-addition:before {
            content: none;
        }

        .layui-icon-subtraction:before {
            content: none;
        }

你可能感兴趣的:(Layui,layui,前端,javascript)