Take you step by step to set the tree structure of layui, click to highlight

How to highlight the click after clicking the tree of layui, this article takes you to quickly set the click highlight.

Click to highlight the most important thing is to click, so highlighting we need to start from the tree click.

First go to the tree configuration

var tree = layui.tree;

tree.render({
        elem: '#category_tree',
        data: data,
        showCheckbox: false,
        id: 'tree_id',
        isJump: false,
        onlyIconControl: true,
        text: {
                none: '<div class="cate-empty">无</div>',
        },
        click: function(obj) {
                // 点击高亮
                $(".layui-tree-set").removeClass('layui-tree-set-active');
                obj.elem.addClass('layui-tree-set-active');
        }
});

It can be seen that the object of obj after tree click is the object of the current node plus the data data. What we need to do is to add the top class of the current node according to the current obj information to make sure that the current node has been clicked. You can view the configuration code for details.

So, now just set the currently clicked node and add the active class, how to achieve highlighting?

Here comes the important point. Now that the active class of the current node has been set, won't we solve the highlighting problem by writing another css.

Just write, the following is a CSS setting used by the author, the specific settings can be set according to your project

.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
    background: #f2f2f2;
}

Screenshot preview

The specific effect can be viewed in the project
lake-admin-cms