CODEWITHSUNDEEP
javascriptjstree
Macbernie
Macbernie

Reputation: 1323

Jstree checkbox, get only the children id

I have a tree of 5 levels, but only the children have a custom id.

<div id="jstree-naf">
    <ul>
        {% for key, naf in json["naf"] %}
        <li>{{ key }}
            <ul>
            {% for key2, naf2 in naf %}
                <li>{{ key2 }}
                    <ul>
                    {% for key3, naf3 in naf2 %}
                        <li>{{ key3 }}
                            <ul>
                            {% for key4, naf4 in naf3 %}
                                <li>{{ key4 }}
                                    <ul>
                                    {% for key5, naf5 in naf4 %}
                                        <li id="{{ key5 }}">{{ naf5 }}</li>
                                    {% endfor %}
                                    </ul>
                                </li>
                            {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                    </ul>
                </li>
            {% endfor %}
            </ul>
        </li>
        {% endfor %}
    </ul>
</div>

But when I select something, I got the id of the children, but also the automatic id of the parents.

 ["58.11Z", "j2_1212"]

My id is "58.11Z", but "j2_1212" is the one of his direct parent, created automatically by jstree, but I don't need it.

Here is my basic initialisation:

$('#jstree-naf').jstree({
    "plugins" : [ "wholerow", "checkbox" ]
});

$('#jstree-naf').on("changed.jstree", function (e, data) {
    console.log(data.selected);
});

Upvotes: 0

Views: 1546

Answers (2)

Chetan Joshi
Chetan Joshi

Reputation: 349

You need to configure your checkbox plugin according to your requirements here. See here jsTree Checkbox plugin config options.

For your requirements you need to set $.jstree.defaults.checkbox.three_state to false(as it defaults to true) and $.jstree.defaults.checkbox.cascade to up/down/undetermined.

As mentioned in the jstree site for '$.jstree.defaults.checkbox.cascade'

This setting controls how cascading and undetermined nodes are applied.

If 'up' is in the string - cascading up is enabled,

if 'down' is in the string - cascading down is enabled,

if 'undetermined' is in the string - undetermined nodes will be used.

If three_state is set to true this setting is automatically set to 'up+down+undetermined'. Defaults to ''

In your case you don't want cascading up to be enabled, you can set cascade option to 'down+undetermined'

To keep cascading up to be enabled and still get only selected child elements. use get_bottom_selected method.

$('#jstree-naf').jstree().get_bottom_selected()

Upvotes: 2

Adam
Adam

Reputation: 2666

Does it always return the selected node as the first item, and then parent nodes afterwards? If so, you could just take the first item:

$('#jstree-naf').on("changed.jstree", function (e, data) {
    console.log(data.selected[0]);
});

Upvotes: 0

Related Questions