javascript - Clickable buttons inside a node - Stack Overflow

admin管理员组

文章数量:1394228

TL;DR - Is there a way to have working links in a jsTree node, without using JS redirection ?

---

I would like to add buttons inside a jsTree node, like this :

I used this code:

$('#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=".0.9/themes/default/style.min.css" rel="stylesheet"/>
<script src=".9.1/jquery.min.js"></script>
<script src=".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>

TL;DR - Is there a way to have working links in a jsTree node, without using JS redirection ?

---

I would like to add buttons inside a jsTree node, like this :

I used this code:

$('#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./ajax/libs/jstree/3.0.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare./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>

My problem is that jsTree create <a> tags on each node (for a semantic purpose) and intercept every click event. My own anchors are supposed to open a new page, but now nothing happens.

The author remends to listen the changed.jstree event, and do the job myself :

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

This solution would be perfectly acceptable if I wanted to use JS redirection. But I don't.
Currently, I edited jsTree source code to avoid event interception (you can have a look on this rejected PR), but like the author mentioned it, this is not the good way to do it. So here is my final question :

Is there a way to have working links in a jsTree node, without using JS redirection ?

I'm open to any suggestion, I still can use to catch/trigger events, and my HTML markup can be reorganized.

• javascript
• jquery
• html
• jstree

Share Improve this question Follow edited Feb 10, 2015 at 16:29 zessx asked Jun 16, 2014 at 9:05 zessxzessx 68.8k2929 gold badges138138 silver badges164164 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can also try this:

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

Take a look here Modify this plugin to your needs and then include it in your page and your plugins config array. You can even modify this to include the buttons inside the anchor (this example includes them in the list element), just make sure you include valid elements (use SPAN or I for example).

本文标签： javascriptClickable buttons inside a nodeStack Overflow