jsTree 监听open_node.jstree事件时,怎样获取展开的结点的ID

Spring_Xu_123 2014-08-05 04:14:22

如图

$('#jstree').on("open_node.jstree",function(e,data){

	    	//此处如何获取ID

	    } );

树部分代码如下

 <div id="jstree">

    <ul>

      <li id="root_node_1">Root node 1

        <ul>

          <li id="child_node_1">Child node 1

            <ul>

              <li id="node_1">node 1</li>

              <li id="node_2">node 2</li>

            </ul>

          </li>

          <li id="child_node_2">Child node 2</li>

        </ul>

      </li>

      <li id="root_node_2">Root node 2</li>

    </ul>

  </div>

...全文

4667 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

嗅嗅匆匆 2017-03-14

打赏
举报

引用 11 楼 Spring_Xu_123 的回复:

[quote=引用 10 楼 daihema 的回复:] 我也有相同的需求，就是想获取选中节点的属性值，试了很多种办法，得到的结果都是指向根节点，不知楼主解决了没有？

之前研究的，都忘了，官方文档里的，试试

$('#jstree')
  // listen for event
  .on('changed.jstree', function (e, data) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
    }
    $('#event_result').html('Selected: ' + r.join(', '));
  })
  // create the instance
  .jstree();

[/quote] 你把data.selected[i]).text改成data.selected[i]).id就好了。

嗅嗅匆匆 2017-03-14

打赏
举报

引用 12 楼 wojiushiwangxiong 的回复:

楼主，展开节点事件，怎么获得展开的这个节点ID，你实现了么？

$('#jstree') // listen for event .on('changed.jstree', function (e, data) { var i, j, r = []; for(i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).text); } $('#event_result').html('Selected: ' + r.join(', ')); }) // create the instance .jstree(); 你把data.selected[i]).text改成data.selected[i]).id就好了。

ghostxiechuan 2016-09-01

打赏
举报

.on("open_node.jstree", function (e, data) { var id = data.node.id; }) 这样就能获取到id了

wojiushiwangxiong 2015-01-27

打赏
举报

楼主，展开节点事件，怎么获得展开的这个节点ID，你实现了么？

Spring_Xu_123 2014-11-03

打赏
举报

引用 10 楼 daihema 的回复:

我也有相同的需求，就是想获取选中节点的属性值，试了很多种办法，得到的结果都是指向根节点，不知楼主解决了没有？

之前研究的，都忘了，官方文档里的，试试

$('#jstree')
  // listen for event
  .on('changed.jstree', function (e, data) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
    }
    $('#event_result').html('Selected: ' + r.join(', '));
  })
  // create the instance
  .jstree();

daihema 2014-11-01

打赏
举报

我也有相同的需求，就是想获取选中节点的属性值，试了很多种办法，得到的结果都是指向根节点，不知楼主解决了没有？

久梦歌行 2014-09-19

打赏
举报

不太懂，顶一下贴吧！

Spring_Xu_123 2014-08-08

打赏
举报

引用 7 楼 yukon12345 的回复:

可能用list-style-image当图片，点击它时候确实是不能算点中了li或ul。反正我建议你所有图片都设置成img标签，写在li中。

这些图片并不要我自己写，当我将这个层中的ul li 初始化成一棵树的时候，jsTree.js 和style.css就自动给每个li前面加上图片了，我可以通过设置不显示而不显示图片，现在就是不知道怎么点击的时候换图片了

步慢生错 2014-08-07

打赏
举报

为啥一定要点+ -就获取id呢？你可以把li全加一个class，比如nodeLi 然后获取$(e.targe).attr("classname")来判断是否点击了li，再获取它的id 另外我是自己写了个读xml的树形插件，那些图标都是img标签，这样获取各种东西就方便了其实也没多长

Spring_Xu_123 2014-08-07

打赏
举报

我的这个想法能实现吗？API里貌似没看到相似的。我用e.target.id 得到的是jstree ，两个展开的结点都打印的是这个，整个层的ID，感觉好像这个想法是不可行的呢。有高手指点下么

步慢生错 2014-08-07

打赏
举报

可能用list-style-image当图片，点击它时候确实是不能算点中了li或ul。反正我建议你所有图片都设置成img标签，写在li中。

Spring_Xu_123 2014-08-07

打赏
举报

引用 4 楼 yukon12345 的回复:

js树有啥难的啊。就是遍历不同数据源有点麻烦。我今天刚自己写了个demo，所有图标都是图片，没用list-style-img，方便的很 http://yukon12345.com/yukon12345.com/templates/test_xml.html

你的这些功能我也实现了哦，现在就是想实现结点关闭时，图标显示为关着的文件夹；结点打开时，显示开着的文件夹这个功能

引用 5 楼 yukon12345 的回复:

另外我看了下确实.attr("className")在高版本jquery库里是无效的，改为.attr("class")才可以。你取到了一串classname，是因为class可以同时被设置为很多个，比如class="one two",那么这2个都可以响应css的选择器。如果要判断其中一个，得用正则了。

我发现获取的class是整个树这一层的，即id="jsTree"这个层的，不是我想要的<li class="li1" id="root_node_1">Root node 1这个层的，看来还是想法有问题，我再想想

步慢生错 2014-08-07

打赏
举报

另外我看了下确实.attr("className")在高版本jquery库里是无效的，改为.attr("class")才可以。你取到了一串classname，是因为class可以同时被设置为很多个，比如class="one two",那么这2个都可以响应css的选择器。如果要判断其中一个，得用正则了。

步慢生错 2014-08-07

打赏
举报

js树有啥难的啊。就是遍历不同数据源有点麻烦。我今天刚自己写了个demo，所有图标都是图片，没用list-style-img，方便的很 http://yukon12345.com/yukon12345.com/templates/test_xml.html

Spring_Xu_123 2014-08-07

打赏
举报

引用 2 楼 yukon12345 的回复:

为啥一定要点+ -就获取id呢？你可以把li全加一个class，比如nodeLi 然后获取$(e.targe).attr("classname")来判断是否点击了li，再获取它的id 另外我是自己写了个读xml的树形插件，那些图标都是img标签，这样获取各种东西就方便了其实也没多长

点+－获取相应ID之后我就能把相应的图标换成打开的（或者关闭的）文件夹啊，你的方法刚试了$(e.target).attr("classname")获取到的是undefined 改成$(e.target).attr("class")获取到的是jstree jstree-1 jstree-default jstree-default-responsive 并不是我命名的class名啊，下面是我所有的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <link href="../css/style.min.css" rel="stylesheet">
</head>

<body>
  <div id="jstree">
    <ul>
      <li class="li1" id="root_node_1">Root node 1
        <ul>
          <li class="li2" id="child_node_1">Child node 1
            <ul>
              <li class="li3" id="node_1">node 1</li>
              <li class="li4" id="node_2">node 2</li>
            </ul>
          </li>
          <li class="li5" id="child_node_2">Child node 2</li>
        </ul>
      </li>
      <li class="li6" id="root_node_2">Root node 2</li>
    </ul>
  </div>
  <div id="event_result"></div>

  <script src="../js/jquery.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/jstree.min.js"></script>
  <script>
  $(function () {
	  $("#jstree")   
	  .bind("open_node.jstree close_node.jstree", function (e,data) {  
	    $("#event_result").html("Last operation: " + $(e.target).attr("class"));    
	  })    
	  .jstree({ "plugins" : [ "themes", "html_data" ] });   
	  }); 
  </script>
</body>
</html>

最近在学jsTree.js这个别人写好的树，所以想用这个实现