Wie ändere ich den Text eines jsTree-Knotens?

Question

Ich glaube, dass die rename_node-Methode der richtige Ansatz ist.

Das Snippet zeigt einen kleinen Baum und einige Formularfelder an, die die Bearbeitung des Knotentexts ermöglichen sollen, sobald einer ausgewählt ist.

Das erwartete Ergebnis ist, dass die Struktur mit dem neuen Knotentext aktualisiert wird. Was passiert, ändert sich nichts.

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

Anscheinend ist die Bearbeitung standardmäßig deaktiviert.

$ .jstree.defaults.core.check_callback

Legt fest, was passiert, wenn ein Benutzer die Struktur von der Baum zu ändern versucht Wenn links als falsch alle Operationen schaffen mag, umbenennen, löschen, verschieben oder zu Kopieren wird verhindert. Sie können dies auf "true" setzen, um alle Interaktionen zuzulassen, oder eine Funktion verwenden, um eine bessere Kontrolle zu erhalten.

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