Question

我相信rename_node方法是正确的方法。

该片段显示一个小树和几个表单字段，一旦选中一个，就可以编辑节点文本。

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

＆＃13;

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());
});

＆＃13;

<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>

＆＃13;

Answer 1

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

$。jstree.defaults.core.check_callback

确定用户尝试修改结构时会发生什么   树如果保留为false，则所有操作如创建，重命名，删除，   移动或复制被阻止。您可以将其设置为true以允许所有   交互或使用函数来更好地控制。

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

如何更改jsTree节点的文本？

1 个答案: