如何更改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 
    } 
});