更改jsTree中的節點文本

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

1. 你沒有得到節點，因爲你可以從data variabl訪問即
2. 呼叫rename_node爲$('#catTree').jstree('rename_node', data.node, newText)代替$('#catTree').jstree('rename_node', [node , newText])
3. 也是你.on代碼移動到主jstree初始化函數

因此，代碼看起來像下面。見示例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" ] 
    }); 
});