layuiのツリー構造を設定するためにステップバイステップで進み、クリックしてハイライトします

layuiのツリーをクリックした後にクリックを強調表示する方法、この記事では、クリックの強調表示をすばやく設定できます。

クリックしてハイライトする最も重要なことはクリックすることなので、ハイライトはツリークリックから始める必要があります。

まず、ツリー構成に移動します

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');
        }
});

ツリークリック後のobjのオブジェクトは、現在のノードのオブジェクトとデータデータであることがわかります。必要なのは、現在のobj情報に従って現在のノードの最上位クラスを追加し、現在のノードがクリックされたことを確認することです。詳細については、構成コードを表示できます。

では、現在クリックされているノードを設定し、アクティブなクラスを追加するだけです。強調表示を実現するにはどうすればよいですか？

ここで重要なポイントがあります。現在のノードのアクティブクラスが設定されたので、別のcssを記述して強調表示の問題を解決しませんか。

書くだけで、以下は作者が使用するCSS設定です。特定の設定はプロジェクトに応じて設定できます。

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

スクリーンショットプレビュー

特定の効果はプロジェクトlake-admin-cmsで見ることができます