从 ajax 追加 ul 或 li 后重建 jstree

Question

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

比如我需要加一个li clickme。在第一个节点上。理想情况下，我认为我只是 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"}})

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

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

同时查看演示 - Fiddle

从 ajax 追加 ul 或 li 后重建 jstree

jstree rebuild after appending ul or li from ajax

php

ajax

jquery

jstree