jstree的创建

最新推荐文章于 2024-09-13 23:50:28 发布

YanniZhang的博客

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量1k

点赞数

分类专栏： jstree 文章标签： jstree 目录树 json data

本文链接：https://blog.csdn.net/jenyzhang/article/details/44922603

版权

jstree 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jstree的创建

　在上一篇“把指定的路径转化为json串。用于jstree的数据源”，　我们已经成功将任何一个路径，无限递归遍历它的子节点并转化为json串存到E:\root.json中。现在我们就用　root.json作为数据源，利用jstree生成目录树。

　　（１）首先：介绍一下jstree.这是一个生成目录树的元件，基于jQuery。官网：http://www.jstree.com/

　　　　　　　　去官网上下载一个最近的jstree包，然后就可以使用。

　　（２）使用jstree

2.1 使用时首先引入三个脚本：

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

  <script src="dist/libs/jquery.js"></script>
  
  <script src="dist/jstree.min.js"></script>

　 2.2然后建一个div

<div id="jstree">
   </div>

2.3然后创建jstree实例：

$(function () { $('#jstree').jstree(); });

其中的#jstree是你上面div的id名。

　　上面这三步就是基本的使用框架。好了，下面给出一个具体的例子：

　　我采用的是使用json数据的方式建一个jstree。

　　下面是html代码。命名为test.html

注意：在core.data.url这里，我写的是“./root.json”代表的就是json数据，实现的就是把root.json里面的数据串生成目录树。root.json数据怎么来的请见我的上一篇文章“把指定的路径转化为json串。用于jstree的数据源”http://blog.csdn.net/jenyzhang/article/details/44905805

<!DOCTYPE html>
<html>
<head>
  <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"
		]

	})
.bind("select_node.jstree", function (event, data) {
	            // `data.rslt.obj` is the jquery extended node that was clicked
	            alert(data.rslt.obj("text"));	        });
 });
  </script>
</body>
</html>

好了下面给出你需要的文件的截图：你的jstree文件夹里应该有这些东西。注意到没？这个图其实也是我用上面的代码生成的目录树喔~