节点内的可点击按钮

TL; DR - 是否有办法在jsTree节点中使用链接，而不使用JS重定向？节点内的可点击按钮

我想添加按钮的jsTree节点内，像这样：

enter image description here

我用这个代码：

$('#tree').jstree({ 
 
    'core': { 
 
     'multiple': false, 
 
     'themes': { 
 
      'responsive': false 
 
     } 
 
    } 
 
});

/* custom */ 
 
body { 
 
    font: 14px/14px "Lucida Sans Unicode", "Lucida Grande", sans-serif normal; 
 
} 
 
.actions a { 
 
    background: #333; 
 
    color: #ccc; 
 
    font-size: 11px; 
 
    line-height: 18px; 
 
    border-radius: 4px; 
 
    padding: 0 5px; 
 
    text-decoration: none; 
 
} 
 
.actions a:hover { 
 
    background: #999; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.1/jstree.min.js"></script> 
 
<div id="tree"> 
 
    <ul> 
 
     <li> 
 
      <span class="content">Folder</span> 
 
      <ul> 
 
       <li> 
 
        <span class="content">Subfolder</span> 
 
        <ul> 
 
         <li> 
 
          <span class="content">File</span> 
 
          <span class="actions"> 
 
           <a href="/open">open</a> 
 
           <a href="/delete">delete</a> 
 
          </span> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

我PR问题在于jsTree在每个节点上创建<a>标签（用于语义目的）并拦截每个click事件。我自己的主播应该打开一个新页面，但现在什么都没有发生。

笔者建议，听取了changed.jstree事件，做的工作我自己：

$('#tree').on('changed.jstree', function (e, data) { 
    document.location = data.instance.get_node(data.selected[0], true).a_attr.href; 
}).jstree();

该解决方案是完全可以接受的，如果我想用JS重定向。但我不知道。
目前，我编辑jsTree源代码以避免事件拦截（you can have a look on this rejected PR），但是就像作者提到的那样，这不是做这件事的好方法。所以这里是我的最后一个问题：

有没有办法在jsTree节点中有工作链接，而不使用JS重定向？

我接受任何建议，我仍然可以用来捕捉/触发事件，我的HTML标记可以重新组织。

来源

2014-06-16 zessx

你也可以试试这个：

$('#tree').on('ready.jstree', function() { 
    $('#tree').off("click.jstree", ".jstree-anchor"); 
})

来源

2015-04-24 14:37:35 vakata

您好！我已经尝试了这一点，它的工作原理，但它也禁用复选框（出于某种原因，也在节点的锚点）。想法如何防止点击但不停止复选框？ –

Ahoy！知道这是迟到的，但如果你在角度上，你总是可以尝试和调用preventDefault（）。 –

看看here 修改这个插件你的需求，然后将其包含在自己的网页和plugins配置阵列。你甚至可以修改它以包含锚点内的按钮（这个例子包括它们在列表元素中），只要确保包含有效元素（例如使用SPAN或I）。

来源

2014-06-16 09:30:13 vakata

节点内的可点击按钮

回答

相关问题