如何更改jsTree節點的文本？

Question

我相信rename_node方法是正確的方法。

該代碼片段顯示一棵小樹和幾個表單域，一旦選擇了一個表單域，應該允許編輯節點文本。

預期的結果是樹被更新爲新的節點文本。發生的事情沒有什麼變化。

var $tree; 
 
$tree = $('#tree'); 
 
$tree.jstree({}); 
 

 
$tree.on('select_node.jstree', function(e) { 
 
\t var selectedNodes = $tree.jstree("get_selected", true); 
 
\t 
 
\t if (selectedNodes.length == 1) { 
 
\t \t var currentNode = selectedNodes[0]; 
 
\t \t $("#costcodeedit").val(currentNode.id); 
 
\t \t $("#nameedit").val(currentNode.text); 
 
\t } 
 
\t 
 
}); 
 
    
 
$("#updateButton").on("click", function (e) { 
 
\t var $codeInp = $("#costcodeedit"); 
 
\t var $nameInp = $("#nameedit"); 
 

 
\t var currentNode = $tree.jstree("get_selected", true)[0]; 
 
\t //console.log(currentNode); 
 

 
\t $tree.jstree('rename_node', currentNode, $nameInp.val()); 
 

 
\t // also tried 
 
\t //$tree.jstree('rename_node', currentNode.id, $nameInp.val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" rel="stylesheet"/> 
 

 
<div id='tree'> 
 
<ul> 
 
\t <li id='costcode_100000'>100000 - Civil 
 
\t <ul> 
 
\t \t <li id='costcode_110000'>110000 - Indirect Costs 
 
\t \t <ul> 
 
\t \t \t <li id='costcode_111000'>111000 - Project Initialization 
 
\t \t \t <ul> 
 
\t \t \t \t <li id='costcode_111010'>111010 - Deliverables 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t </li> 
 
\t </ul> 
 
\t </li> 
 
</ul> 
 
</div> 
 

 
<br> 
 
<div> 
 
\t <div><label for="Code">Code</label>:<input id="costcodeedit" class="form-control" name="code" type="text" value="" disabled="disabled"></div> 
 
\t <div><label for="Name">Name</label>:<input id="nameedit" class="form-control" name="name" type="text" value=""></div> 
 
\t <div><button id="updateButton">Update</button></div> 
 
</div>

Answer 1

顯然編輯默認情況下禁用。

$ .jstree.defaults.core.check_callback

確定當用戶試圖如果不爲假的所有操作，如創建，重命名，刪除修改的 樹結構會發生什麼， 移動或複製被阻止。您可以將其設置爲true以允許所有 交互或使用函數來更好地控制。

$tree.jstree({ 
    'core': { 
     'check_callback': true 
    } 
});