Jquery 选中html数据中的jsTree复选框_Jquery_Html_Jstree

Jquery 选中html数据中的jsTree复选框

jquery html

Jquery 选中html数据中的jsTree复选框,jquery,html,jstree,Jquery,Html,Jstree,我有一个ajax请求，返回数据以显示带有复选框的树。在ajax调用返回的de html数据中，使用自定义数据checkstate属性定义项的检查状态。如何在树中恢复此检查状态预期结果： <head> <meta charset="utf-8" /> <title>JsTree test</title> <link rel="stylesheet" href="http://static.jstree.com/la

我有一个ajax请求，返回数据以显示带有复选框的树。在ajax调用返回的de html数据中，使用自定义数据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测试
$（函数（）{
var ajaxResponse=
“父级1”+
“”+
“子项1a”+
“”+
“Grantchild 1a1”+
“Grantchild 1a2”+
“”+
“”+
“Child 1b”+
“”+
“Grantchild 1b1”+
“Grantchild 1b2”+
“”+
“”+
“”+
“”+
“父级2”+
“”+
“Child 2a”+
“”+
“Grantchild 2a1”+
“Grantchild 2a2”+
“”+
“”+
“Child 1b”+
“”+
“Grantchild 2b1”+
“Grantchild 2b2”+
“”+
“”+
“”+
“”；
变量树=$（“#容器”）；
html（ajaxResponse）；
on（'loaded.jstree'，函数（）{
//恢复树状态
$（'li[data checkstate=“checked”]”）。每个（函数（）{
$（this.addClass（'jstree-checked'）；
});
$（'li[data checkstate=“待定”]”）。每个（函数（）{
$（this.addClass（'jstree-undeminated'）；
});
});
tree.jstree({
插件：[“复选框”]，
核心：{
“主题”：{
“图标”：错误
}
}
});
});

更新：

编辑：移动到答案

这对我来说很有用：

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

我知道这很旧，但可能对某人有帮助

要选中通过HTML加载时的复选框，请设置类，如示例所示：

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

视图
上面的格式对我很有用<代码>数据jstree='{“选中”：true}'
根据：
检查我

您不必以这种方式自行设置内部锚定，也不必在创建/呈现锚定后切换复选框。
对于此功能，您不需要对每个锚定重复使用。。。只是$（'data-checkstate=“checked”]'）。addClass（'jstree-checked'）等等你应该删除你的问题或者自己发布答案并接受它
<li data-jstree='{"selected": true }'>Check Me</li>