JStree设置链接href和重定向答案

【问题标题】：JStree set link href and redirectJStree设置链接href和重定向
【发布时间】：2012-09-12 22:20:37
【问题描述】：

我在我的 Rails 应用程序中使用 jstree，并且我正在使用 json 数据，但我遇到了麻烦：我如何设置节点链接和 href，以便我可以继续？ Json看起来是这样的：

var data = [
{
   "data":"\u041b\u0435\u0433\u043a\u043e\u0432\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438",
   "href":10001,
   "children":[
      {
         "data":"\u041a\u0443\u0437\u043e\u0432",
         "href":10101,
         "children":[
            {
               "data":"\u0422\u043e\u043f\u043b\u0438\u0432\u043d\u044b\u0439 \u0431\u0430\u043a / \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0435",
               "href":10316
            },
            {
               "data":"\u041a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0430\u0442\u043e\u0440\u0430",
               "href":10317
            },
            {
               "data":"\u041e\u0431\u043b\u0438\u0446\u043e\u0432\u043a\u0430 / \u0437\u0430\u0449\u0438\u0442\u0430 / \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 / \u044d\u043c\u0431\u043b\u0435\u043c\u044b / \u0437\u0430\u0449\u0438\u0442\u0430 \u0440\u0430\u0441\u043f\u044b\u043b.",
               "href":10319,
               "children":[
                  {
                     "data":"\u041e\u0431\u043b\u0438\u0446\u043e\u0432\u043a\u0430/\u0437\u0430\u0449\u0438\u0442\u043d\u0430\u044f \u043d\u0430\u043a\u043b\u0430\u0434\u043a\u0430",
                     "href":10840
                  },
                  { ................................

还有js

$("#tree").jstree({
    plugins: ['themes', 'json_data'],
    json_data: {data: data},
      themes: {
          theme: 'apple'
      },   
  });
  $('#tree').bind('select_node.jstree', function(e,data) { 
    window.location.href = "123123"
});

但如果我看到代码，链接有 href = "#"。怎么了？

【问题讨论】：

标签： jquery ruby-on-rails json jstree

【解决方案1】：

一个 JSTree 节点对象没有 href 属性。如果你想设置它，你将不得不使用attr 属性并包含一个键值对数组，这些键值对将标识 JSTree 将放置的任何属性您的 HTML 输出.. 考虑以下示例：

$(function () {
$("#demo1").jstree({ 
    "json_data" : {
        "data" : [
            { 
                "data" : "A node", 
                "metadata" : { id : 23 },
                "children" : [ "Child 1", "A Child 2" ]
            },
            { 
                "attr" : { "id" : "li.node.id1" }, 
                "data" : { 
                    "title" : "Long format demo", 
                    "attr" : { "href" : "#" } 
                } 
            }
        ]
    },
    "plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("id")); });
});

并遵循 DOC：

JSTree JSON-DATA pulgin DOC

【讨论】：

这似乎将 href 属性添加到 li 元素而不是锚元素

【解决方案2】：

要将 href 元素添加到锚标记，您应该执行以下操作：

向 a 元素添加 href 元素
监听点击元素
重定向到网址

类似这样的：

    $("#tree_asset").jstree({
            "data": [{
                    "text": "Parent",
                    "icon": "fas fa-city text-default",
                    "children": [
                    {
                        "text": "Child - Linked to StackOverflow website",
                        "icon": "fas fa-building text-danger",
                        "a_attr" : {"href": "https://stackoverflow.com/"},
                    }]
             }],
           "plugins": ["contextmenu", "state", "types"]
    }).on('changed.jstree', function (e, data) {
        var href = data.node.a_attr.href;
        var parentId = data.node.a_attr.parent_id;
        if(href == '#')
        return '';
        window.location.href = href;
    });

【讨论】：

【解决方案3】：

如果您想定位锚链接 href 属性中的链接，您可以使用 window.open 或 location.href 首先您需要在输出中添加 html 标记内的锚标记，在 jstre 插件初始化之前直接或以编程方式。

您的 html 标记应如下所示..

 <li class="jstree-open" id="node_1"><a href="my-file.pdf">file</a></li>

在jstree实例化中...

    .on('changed.jstree', function (e, data) {
    
     let hreflink = data.node.a_attr.href;

     if(hreflink != '#'){
     window.open(hreflink); //to open in a new window or tab
     location.href=hreflink; //to open in the same page
    }
    
});

【讨论】：