如何用jsTree.js实现结点展开和收拢时图标的变化

JavaScript014

如何用jsTree.js实现结点展开和收拢时图标的变化,第1张

您好,很高兴为您解答。

<%@ page language="java" contentType="text/html charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--  IE使用它所支持的最新版本-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>tree</title>

<link href="../css/bootstrap.min.css" rel="stylesheet">

<link href="../css/style.min.css" rel="stylesheet">

<link href="../css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

  <div id="myTree">

    <ul>

      <li>Root 1</li>

      <li>Root 2

        <ul>

          <li id="child1">

            <a>child 1</a>

            <ul>

              <li>child 1-1</li>

              <li>child 1-2</li>

            </ul>

          </li>

          

          <li>child 2</li>

          <li>child 3</li>

        </ul>

      </li>

      <li>Root 3</li>

    </ul>

  </div>

  

  <script src="../js/jquery.min.js"></script>

  <script src="../js/bootstrap.min.js"></script>

  <script src="../js/jstree.min.js"></script>

  <script>

  $(function () { 

$('#myTree').jstree()

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

  console.log(data.selected)

  }) 

$('button').on('click', function () {

      $('#myTree').jstree(true).select_node('child1')

      $('#myTree').jstree('select_node', 'child1')

      $.jstree.reference('#myTree').select_node('child1')

  }) 

  })

  </script>

  

</body>

</html>

如若满意,请点击右侧【采纳答案】,如若还有问题,请点击【追问】

希望我的回答对您有所帮助,望采纳!

~ O(∩_∩)O~

修改方法:

JQuery

$('#子节点id').parent().attr('id')//通过子元素id获取父元素

js

document.getElementById("子节点id").parentNode.getAttribute("id")

1、JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

2、能够具有交互性,能够包含更多活跃的元素,就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM,文档对象模型)、Layers和 Cascading Style Sheets(CSS,层叠样式表),这里主要讲Javascript。那么Javascript是什么东西?Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。

在dhtmlxtree中可以用tree.getleafcount(itemid)获取节点下的子节点数,如果你想计算的是根节点下所有的子节点的话,可以先用上面的计算出根节点下的子节点数然后在有循环判断这些子节点中那个有孩子节点然后在根据tree.getleafcount(itemid)计算此节点下的字节点数,依次循环直至最后。