如何更改 jsTree 节点的文本？

Question

我认为 rename_node 方法是正确的方法。

代码段显示一棵小树和几个表单域，一旦选择其中一个，应该允许编辑节点文本。

预期结果是用新节点文本更新树。正在发生的事情没有任何变化。

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

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

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

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

 // also tried
 //$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>
 <li id='costcode_100000'>100000 - Civil
 <ul>
  <li id='costcode_110000'>110000 - Indirect Costs
  <ul>
   <li id='costcode_111000'>111000 - Project Initialization
   <ul>
    <li id='costcode_111010'>111010 - Deliverables
    </li>
   </ul>
   </li>
  </ul>
  </li>
 </ul>
 </li>
</ul>
</div>

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

Answer 1

显然默认情况下禁用编辑。

$.jstree.defaults.core.check_callback

Determines what happens when a user tries to modify the structure of the tree If left as false all operations like create, rename, delete, move or copy are prevented. You can set this to true to allow all interactions or use a function to have better control.

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

如何更改 jsTree 节点的文本？

How to change the text of a jsTree node?

javascript

jquery

jstree