Question

我想修改创建节点时创建的DOM jstree。以编程方式创建节点时，jstree会创建 <li><a ../></li>。我想将其包装成<span><a ../> more content</span>，但我不知道如何自定义DOM jstree创建。

创建初始jstree很简单（有一些虚拟数据）：

$("#tree").jstree({
        "json_data": {
            "data": {
                "data": "TE-CON",
                "metadata": {
                    "id": 23
                },
                "children": [
                    {
                        "data": "Node 1",
                        "children": [ "Node1.1", "Node1.2" ]
                    },
                    "TE-CON"
                ]

            }},
        "plugins": [ "themes", "json_data", "grid" ]
    });

这会创建一个DOM：

<li class="jstree-last jstree-open">
<ins class="jstree-icon">&nbsp;</ins>
    <a href="#"><ins class="jstree-icon"></ins>TE-CON</a>

    <ul style="">
        <li class="jstree-open">
            etc...

而不是创建的<a href="#"><ins class="jstree-icon"></ins>TE-CON</a>我希望在span块中有一个<span><a href="#"><ins class="jstree-icon"></ins>TE-CON</a></span>以及更多额外的HTML。

Answer 1

您可以采用与提到的相同方式如果您已从服务器静态创建元素。但是，如果您已动态创建元素，则必须在创建节点后执行此操作，如下所示：

var node = $.jstree._reference('#demo1').create_node(
 node, 'last', data, false, false
);
var newnode = node.children().last();

node.append('<input type="text" ></input>');

另一种方法是根据此链接使用html_titles https://stackoverflow.com/a/5059969/2547372

修改jstree中创建的节点的DOM

1 个答案: