JStree设置链接href并重定向

Question

我正在我的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
                  },
                  { ................................

And 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属性值是"#". 这有什么问题吗？

- byCoder

Answer 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")); });
});

请按照文档操作：

JSTree JSON-DATA插件文档

- Mortalus

---

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

Answer 2

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

您的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
    }
    
});

- Jean G.T

Answer 3

要向锚点标签添加href元素，您应该这样做：

1. 将href元素添加到a元素中
2. 监听元素的点击
3. 重定向到URL

大致如此：

    $("#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;
    });

- Stefano Passaro