rename_nodeメソッドが正しいアプローチだと思います。jsTreeノードのテキストを変更するには?
スニペットには小さなツリーと、ノードテキストの編集を可能にする2つのフォームフィールドが表示されます。
予想される結果は、ツリーが新しいノードテキストで更新されることです。何が起こっているかは何も変わらないことです。
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>
私の答えがあなたのために働くかどうか教えてください。私はそれを私の最後に働かせました。 – lloyd