I am having a little problem with JSTree (https://www.jstree.com/).
To simplify, i have an tree of projects, and i want to put an action before the name of each listed projects (an action to go to project using fontawesome), i already know how to make an redirect using JS, but JSTree do not allow me to insert this action on my tree.
In a visual way i need to do something like:
I am doing something like this:
(HTML)
<div id="jstree_projects">
<ul>
<li data-jstree='{"opened":true}'>
<i class="fa fa-arrow-right fa-fw redirect_project"
data-url="<?= site_url('ON CLICK THIS ACTION, REDIRECT TO THIS URL'); ?>">
</i>
PROJECT NAME
<ul>
<li data-jstree='{"opened":true}'>
<i class="fa fa-arrow-right fa-fw redirect_project"
data-url="<?= site_url('ON CLICK THIS ACTION, REDIRECT TO THIS URL'); ?>">
</i>
PROJECT NAME 2
</li>
</ul>
</li>
</ul>
</div>
(CSS)
#jstree_projects{
margin-top: 20px;
width: 100%;
overflow-x: auto;
}
.redirect_project{
color: yellow;
margin-right: 10px;
}
(JS)
$('#jstree_projects').jstree();
If anyone may help me, I'll be grateful.
You can use select_node.jstree event. It will provide you the selected node
object and the related data to it. Also, you can check is it the last item in the list with the property children: []
.
I have created a jsFiddle for you, click here.
The only change that I did was to move the data-url
attribute to the <li>
tag.