5

我在我的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 =“#”。怎么了？

4

3 回答 3

3

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 插件文档

于 2012-09-15T08:22:49.083 回答
1

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

  1. 将 href 元素添加到 a 元素
  2. 聆听点击元素
  3. 重定向到网址

像这样：

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

于 2021-07-20T18:02:28.453 回答
1

如果您想定位锚链接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
    }
    
});
于 2021-09-03T05:56:21.943 回答