Search code examples
jqueryhtmljstree

jsTree checkbox checked from html data

I have a ajax request returning data to show a tree with checkboxes. In de html data returned from the ajax call the check state of the items is defined using a custom data-checkstate attribute. How can i restore this check state in the tree?

Expected result:

expected result

<head>
    <meta charset="utf-8" />
    <title>JsTree test</title>

    <link rel="stylesheet" href="http://static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
    <script src="http://static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
    <script src="http://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
</head>
<body>
    <div id="container"/>
</body>
</html>

<script>
    $(function () {
        var ajaxResponse = 
            '<ul> <li data-checkstate="undetermined">Parent 1' +
            '    <ul>' +
            '        <li data-checkstate="unchecked">Child 1a' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 1a1</li>' +
            '                <li data-checkstate="unchecked">Grantchild 1a2</li>' +
            '            </ul>' +
            '        </li>' +
            '        <li data-checkstate="undetermined">Child 1b' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 1b1</li>' +
            '                <li data-checkstate="checked">Grantchild 1b2</li>' +
            '            </ul>' +
            '        </li>' +
            '    </ul>' +
            '</li>' +
            '<li data-checkstate="unchecked">Parent 2' +
            '    <ul>' +
            '        <li data-checkstate="unchecked">Child 2a' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 2a1</li>' +
            '                <li data-checkstate="unchecked">Grantchild 2a2</li>' +
            '            </ul>' +
            '        </li>' +
            '        <li data-checkstate="unchecked">Child 1b' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 2b1</li>' +
            '                <li data-checkstate="unchecked">Grantchild 2b2</li>' +
            '            </ul>' +
            '        </li>' +
            '    </ul>' +
            '</li> </ul>';

        var tree = $("#container");
        tree.html(ajaxResponse);
        tree.on('loaded.jstree', function () {
            // restore tree state
            $('li[data-checkstate="checked"]').each(function () {
                $(this).addClass('jstree-checked');
            });
            $('li[data-checkstate="undetermined"]').each(function () {
                $(this).addClass('jstree-undetermined');
            });
        });

        tree.jstree({
            plugins: ["checkbox"],
            core: {
                "themes": {
                    "icons": false
                }
            }
        });
    });
</script>

Update: Edit: Moved to the answer

Solution

  • This did the trick for me:

    var tree = $("#container");
    tree.html(ajaxResponse);
    tree.jstree({
        plugins: ["checkbox" ],
        core: {
            "themes": {
                "icons": false
            }
        }
    });
    tree.jstree(true).open_all();
    $('li[data-checkstate="checked"]').each(function() {
        tree.jstree('check_node', $(this));
    });
    tree.jstree(true).close_all();