JSTREE在从AJAX附加ul或Li后重建

Question

如果我从 ajax 添加 ul/li，我们如何恢复 jstree？ 因为我发起使用 ul li HTML 的 js 树。

例如，我需要添加一个 li 点击我 。在第一个节点上。理想情况下，我只是 append（） 函数。但似乎没有重建JSTREE。

<div id="tree_1">
    <ul>
        <li data-jstree='{ "opened" : true, "type" : "root" }'> Global - DemoFLow1
            <ul>
                <li data-jstree='{ "opened" : true }' li_id="1"> Default paths
                    <ul>
                        <li>
                            <span class="tree-name">Path 1</span>
                            <span class="tree-value">125 (20.00%)</span>
                        </li>
                        <li>
                            <span class="tree-name">Path 2</span>
                            <span class="tree-value">125 (20.00%)</span>
                        </li>
                        <li data-jstree='{ "type" : "btn" }'><button type="button" class="btn btn-xs grey-mint"> Add new path </button> </li>
                    </ul>
                </li>
                <li data-jstree='{ "opened" : true }' li_id="2"> Rule 1
                    <ul>
                        <li>
                            <span class="tree-name">Path 1</span>
                            <span class="tree-value">125 (20.00%)</span>
                        </li>
                        <li data-jstree='{ "type" : "btn" }'><button type="button" class="btn btn-xs grey-mint"> Add new path </button> </li>
                    </ul>
                </li>
                <li data-jstree='{ "type" : "btn" }'><button type="button" class="btn btn-xs grey-mint"> Add new rule </button></li>
            </ul>
        </li>
    </ul>
</div>

var tree = $('#tree_1').jstree({
                "core" : {
                    "themes" : {
                        "responsive": false
                    }            
                },
                "types" : {
                    "default" : {
                        "icon" : "fa fa-circle-o"
                    },
                    "path" : {
                        "icon" : "fa fa-circle-o"
                    },
                    "root" : {
                        "icon" : "fa fa-circle"
                    },
                    "btn" : {
                        "icon" : "fa fa-plus"
                    }
                },
                "plugins": ["types"]
            });   

Answer 1

基本上你会在ajax回调代码中使用，如下所示。

这会将一个新节点添加到树根目录：

$('#tree_1').jstree().create_node( '#',  "New node");

要添加一些属性值，您将使用：

$('#tree_1').jstree().create_node( '#',  { "id": "newid", "name": "New node", "type" : "btn", "li_attr": { "attr1": "value of attr1", "attr2": "value of attr2"}})

要将新节点添加到 root 以外的某个节点，您需要将#替换为该节点 ID。

确切的用法将取决于您从服务器获得的 ajax 响应。

另请查看演示 - 小提琴