jstree获得节点的值

最新推荐文章于 2025-06-12 11:23:49 发布

原创最新推荐文章于 2025-06-12 11:23:49 发布 · 1.3w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jstree #获得节点的值

jstree 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在jstree中通过点击节点获取其值。文章提到了利用get_node() API来实现这一功能，并提供了官方文档链接以供详细参考。示例代码展示了如何在点击'test1.1.txt'节点时弹出节点值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jstree获得节点的值

jstree中点击节点，如何获得节点的值呢？看了官方文档后，我发现可以用get_node()这个API

链接：http://www.jstree.com/api/#/?f=get_node%28obj%20[,%20as_dom]%29

如何用呢？是样的：

.on('changed.jstree', function (e, data) {     alert (data.instance.get_node(data.selected[0]).text);
      })

下面给出完整的html代码：

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
  <meta name="keywords" content="jstree,html">
  <meta name="author" content="YanniZhang">
  <meta name="discription" content="get node value from jstree">
  <meta charset="utf-8">
  <title>jsTree test</title>
  <! load the theme CSS file -->
  <link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
  <!-- setup a container element -->
  <div id="jstree">
   </div>
  <!-- include the jQuery library -->
  <script src="dist/libs/jquery.js"></script>
  <!--  include the minified jstree source -->
  <script src="dist/jstree.min.js"></script>
  <script>
  $(function () {
    //  create an instance when the DOM is ready
  
	$('#jstree').jstree({
		
               'core' : {
			'data' : {
				"url" : "./root.json",
				"dataType" : "json" // needed only if you do 

not supply JSON headers
			}
		},
	
           
 "themes" : {
	         "theme" : "classic", 
	         "dots" : true,
	         "icons" : true
	   },
"types":{

 
     
"leaf" : {
        "icon" : "./leaf.png"

      }


},
"plugins" : [ 
			"themes","json_data", "ui","types","dnd"
		]

	})
 .on('changed.jstree', function (e, data) {     alert (data.instance.get_node

(data.selected[0]).text);
      })
 });
  </script>
</bod
</html>
</span>

效果是这样的：我还是用了root.json作为数据源生成jstree.关于root.json的生成请看我的博文：“jstree中json data的生成”