{% extends "base" %}

{% block title %}Javascript tree with custom html{% endblock %}
{% block h1 %}Example 9 - custom html{% endblock %}

{% block previous_url %}multiple_select.html{% endblock %}
{% block previous_title %}Example 8{% endblock %}
{% block next_url %}icon_buttons.html{% endblock %}
{% block next_title %}Example 10{% endblock %}

{% block contents %}
    <style>
        .jqtree-tree .edit {
            margin-left: 8px;
            vertical-align: middle;
        }
    </style>
    <p>
        This example uses the <strong>onCreateLi</strong> option to create an edit link next to the tree node.
    </p>
    <div id="tree1"></div>

    <h3>html</h3>

<pre><code class="language-markup">&lt;div id="tree1"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>

<pre><code class="language-javascript">$(function() {
    var $tree = $('#tree1');

    $tree.tree({
        data: ExampleData.example_data,
        autoOpen: 1,
        onCreateLi: function(node, $li) {
            // Append a link to the jqtree-element div.
            // The link has an url '#node-[id]' and a data property 'node-id'.
            $li.find('.jqtree-element').append(
                '&lt;a href="#node-'+ node.id +'" class="edit" data-node-id="'+
                node.id +'"&gt;edit&lt;/a&gt;'
            );
        }
    });

    // Handle a click on the edit link
    $tree.on(
        'click', '.edit',
        function(e) {
            // Get the id from the 'node-id' data property
            var node_id = $(e.target).data('node-id');

            // Get the node from the tree
            var node = $tree.tree('getNodeById', node_id);

            if (node) {
                // Display the node name
                alert(node.name);
            }
        }
    );
});
</code></pre>
{% endblock %}

{% block script %}
    <script>
        $(function() {
            var $tree = $('#tree1');

            $tree.tree({
                data: ExampleData.example_data,
                autoOpen: 1,
                onCreateLi: function(node, $li) {
                    // Append a link to the jqtree-element div.
                    // The link has an url '#node-[id]' and a data property 'node-id'.
                    $li.find('.jqtree-element').append(
                        '<a href="#node-'+ node.id +'" class="edit" data-node-id="'+ node.id +'">edit</a>'
                    );
                }
            });

            // Handle a click on the edit link
            $tree.on(
                'click', '.edit',
                function(e) {
                    // Get the id from the 'node-id' data property
                    var node_id = $(e.target).data('node-id');

                    // Get the node from the tree
                    var node = $tree.tree('getNodeById', node_id);

                    if (node) {
                        // Display the node name
                        alert(node.name);
                    }
                }
            );
        });
    </script>
{% endblock %}
