Question

我是一个长期的JavaScript编码器，但是jQuery的新手。我正在使用jsTree并需要更改节点名称。我从这个网站和其他人那里搜索并尝试过很多例子，但找不到有效的解决方案。基本上，我正在尝试更改树节点名称，但它总是重命名为“undefined”。在以下示例中，每当选择节点时，文本都应该更改。

应该进行更改的代码块是：

    $('#catTree')
    // listen for event
    .on('changed.jstree', function (e, data) {
        var node = data.instance.get_node(data.selected[0])
        var newText = "Some new text";
        $('#catTree').jstree('rename_node', [node , newText] );
    })

如果我只是遗漏了一些明显的东西，这里就是整个例子：

    <div id="catTree" class="demo"></div>
<script>
var catData = [
     { "id" : "allCategories", "parent" : "#", "type" : "catRoot", "text" : "All categories" },
     { "id" : "category1", "parent" : "allCategories", "type" : "category", "text" : "Category 1" },
     { "id" : "category2", "parent" : "allCategories", "type" : "category", "text" : "Category 2" },
     { "id" : "category3", "parent" : "allCategories", "type" : "category", "text" : "Category 3" },
]

$.jstree.defaults.core = {
        strings      : false,
        check_callback  : true,
        animation    : 100,
        aria_roles    : true,
        multiple    : false,
        themes      : {
            name      : false,
            url        : true,
            dots      : true,
            icons      : true,
            dir        : false
        },
        base_height    : false
    };

$('#catTree')
    // listen for event
    .on('changed.jstree', function (e, data) {
        var node = data.instance.get_node(data.selected[0])
        var newText = "Some new text";
        $('#catTree').jstree('rename_node', [node , newText] );
    })

$(function () {
    $("#catTree").jstree({ 
        'core' : {
            'data' : catData
        },
        "types" : {
                "category" : { "icon" : "none", "max_children" : 1, "valid_children" : ["pasteText"] },
        },
        "crrm" : { 
            "move" : {
                "check_move" : function (m) { 
                    var p = this._get_parent(m.o);
                    if(!p) return false;
                    p = p == -1 ? this.get_container() : p;
                    if(p === m.np) return true;
                    if(p[0] && m.np[0] && p[0] === m.np[0]) return true;
                    return false;
                }
            }
        },
        "dnd" : {
            "drop_target" : false,
            "drag_target" : false
        },
        "plugins" : [ "themes", "html_data", "crrm", "dnd", "types" ]
    });
});
</script>

我正在使用jsTree v3.2.1和jQuery v2.1.4

Answer 1

您不必获取节点，因为您可以从data变量访问它。
将rename_node称为$('#catTree').jstree('rename_node', data.node, newText)，而不是$('#catTree').jstree('rename_node', [node , newText] )
还将您的.on代码移至主jstree init函数

所以代码如下所示。请参见示例JS Fiddle。

$(function () {
    $("#catTree").on('changed.jstree', function (e, data) {
        var newText = "Some new text";
        $('#catTree').jstree('rename_node', data.node, newText);
    })
    .jstree({ 
        'core' : {
            'data' : catData
        },
        "types" : {
            "category" : { "icon" : "none", "max_children" : 1, "valid_children" : ["pasteText"] },
        },
        "crrm" : { 
            "move" : {
                "check_move" : function (m) { 
                    var p = this._get_parent(m.o);
                    if(!p) return false;
                    p = p == -1 ? this.get_container() : p;
                    if(p === m.np) return true;
                    if(p[0] && m.np[0] && p[0] === m.np[0]) return true;
                    return false;
                }
            }
        },
        "dnd" : {
            "drop_target" : false,
            "drag_target" : false
        },
        "plugins" : [ "themes", "html_data", "crrm", "dnd", "types" ]
    });
});

在jsTree中更改节点文本

1 个答案: