2017-07-14 1 views
0

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>

+0

私の答えがあなたのために働くかどうか教えてください。私はそれを私の最後に働かせました。 – lloyd

答えて

0

どうやら編集はデフォルトで無効になっています。

$ .jstree.defaults.core.check_callback

ユーザーはすべての操作が作成し、名前の変更、削除、 移動などの偽のままにしておくと ツリーの構造を変更しようとしたときにどうするかを決定コピーが防止されます。すべての の対話を許可するか、または関数を使用してより良い制御を可能にするには、これをtrueに設定できます。

+0

うん、それは、多くのロイドをありがとう! – James

関連する問題