jstree获得节点的值

这篇博客介绍了如何在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的生成”


点击“test1.1.txt”会得到节点的值,作为对话框弹出:






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值