从 html 数据中检查的 jsTree 复选框答案

【问题标题】：jsTree checkbox checked from html data从 html 数据中检查的 jsTree 复选框
【发布时间】：2014-07-31 08:18:43
【问题描述】：

我有一个 ajax 请求返回数据以显示带有复选框的树。在从 ajax 调用返回的 de html 数据中，项目的检查状态是使用自定义 data-checkstate 属性定义的。如何在树中恢复此检查状态？

预期结果：

<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>

更新： 编辑：移至答案

【问题讨论】：

jstree checkbox checked on load 的可能重复项
您无需使用 each 进行迭代即可获得此功能...只需 $('data-checkstate="checked"]').addClass('jstree-checked'); 等
您应该删除您的问题或自己发布答案并接受它

标签： jquery html jstree

【解决方案1】：

我知道这是旧的，但可能对某人有帮助。

要检查通过 HTML 加载时的复选框，请按示例设置类：

<li id="123">
    <a href="#" class="jstree-clicked">Click me</a>
</li>

【讨论】：

【解决方案2】：

这对我有用：

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();

【讨论】：

【解决方案3】：

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

上述格式对我有用。 data-jstree='{"checked": true }'

【讨论】：

【解决方案4】：

每jstree docs：

<li data-jstree='{"selected": true }'>Check Me</li>

您不必以这种方式自己设置内部锚点，也不必在创建/渲染后切换复选框。

【讨论】：