jstree 超链接

最新推荐文章于 2025-10-25 00:19:15 发布

原创最新推荐文章于 2025-10-25 00:19:15 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fastadmin #jstree

fastadmin 专栏收录该内容

1 篇文章

订阅专栏

在最近的前端开发中，为了构建无限级分类的树状展示，我选择了jstree。这个库帮助我在没有其他前端组件的情况下，轻松实现了这一功能。然而，将超链接集成到树节点上需要一些额外的代码处理。通过混合HTML和jstree的配置，成功地为每个节点添加了可点击的超链接。

1.最近开发无限极分类的树没有前端自己使用jstree

2超链接的挂载需要自己加入代码

html 混合写

<script src="/assets/libs/jstree/dist/jstree.js" ></script> 引入

<script>
    $(document).ready(function () {

        //展开
        $(document).on("click", "#expandall", function () {
            $("#channeltree").jstree($(this).prop("checked") ? "open_all" : "close_all");
        });

        $('#channeltree').jstree({
            "themes": {
                "stripes": true
            },
            "types": {
                "channel": {
                    "icon": "fa fa-th",
                },
                "list": {
                    "icon": "fa fa-list",
                },
                "link": {
                    "icon": "fa fa-link",
                }

            },
            'plugins': ["types"],
            "core": {
                "multiple": true,
                'check_callback': true,
                "data": {$channelList}  mvc 视图渲染数据（我的TP5.0）
            }
        });
    });// end ready
    //单击跳转的URL  单击事件
    $('#channeltree'节点div id).on('changed.jstree',function(e,data){
    //当前选中节点的id
        var urll=document.getElementById(data.instance.get_node(data.selected[0]).id+'_anchor').getAttribute("href");
//获取节点href
        window.open(urll);
    });