節點內的可點擊按鈕

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

節點內的可點擊按鈕

回答

相關問題