jsTree Kontrollkästchen aktiviert von html-Daten

Habe ich einen ajax-request zurückgeben von Daten zeigen einen Baum mit Checkboxen. In de html-Daten zurückgegeben, die von der ajax-Aufruf den Status, ob die Elemente definiert, die mithilfe von benutzerdefinierten Daten-checkstate-Attribut.
Wie kann ich wieder diese Prüfung Stand in den Baum?

Erwartete Ergebnis:

jsTree Kontrollkästchen aktiviert von html-Daten

<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: Verschoben, um die Antwort

  • mögliche Duplikate von jstree checkbox aktiviert beim laden
  • Sie brauchen nicht zu Durchlaufen, mit each für diese Funktion... Nur $('data-checkstate="checked"]').addClass('jstree-checked'); usw.
  • Sollten Sie entweder entfernen Sie Ihre Frage oder post eine Antwort sich selbst und akzeptieren Sie es
InformationsquelleAutor pexxxy | 2014-07-31
  1. 2

    Diese hat den trick für mich:

    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();
    InformationsquelleAutor pexxxy
  2. 2

    Ich weiß, das ist alt, aber vielleicht hilfreich für jemanden.

    Das Kontrollkästchen beim laden via HTML, legen Sie die Klasse wie im Beispiel:

    <li id="123">
    <a href="#" class="jstree-clicked">Click me</a>
</li>
    InformationsquelleAutor Wojtek B
  3. 0

    <li data-jstree='{"checked": true }'>View</li>

    Oben format für mich gearbeitet. data-jstree='{"checked": true }'

    InformationsquelleAutor Ranju R
Schreibe einen Kommentar