Question

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

预期结果：

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>

更新编辑：已移至答案

Answer 1

这对我有用：

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

Answer 2

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

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

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

Answer 3

每jstree docs：

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

您不必自己设置内部锚，也不必在复选框已创建/渲染后切换它。

Answer 4

CREATE TABLE products ( productId INT unsigned NOT NULL AUTO_INCREMENT, productName VARCHAR(150) NOT NULL, price DECIMAL(13,2) NOT NULL, categoryId INT unsigned NOT NULL, active TINYINT(1) unsigned NOT NULL, description TEXT NULL, PRIMARY KEY (productId), FOREIGN KEY (categoryId) REFERENCES productCategories(productCategoriyId) );

以上格式对我有用。 <li data-jstree='{"checked": true }'>View</li>

从html数据检查jsTree复选框

4 个答案: