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"}})

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

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

同时查看演示 - Fiddle

从ajax追加ul或li后重建jstree

1 个答案: