<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

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

		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

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

	</head>

	<body>

		<div class="container">

			<div class="row" style="height: 100px;"></div>

			<div class="row">

				<div class="col-md-3">

					<!-- 描述：搜索框 -->

					<div class="input-group row">

						<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-screenshot"></i></span>

						<input type="text" class="form-control" placeholder="请输入功能名称..."
							id="search_ay" aria-describedby="basic-addon1">

					</div>

					<!--描述：jstree 树形菜单容器-->

					<div id="jstree_demo_div" class="row">

					</div>

				</div>

				<div lass="col-md-9">

					<button class="btn btn-tab" var='json/data.json'>data.json</button> <!--点击切换资源-->

					<button class="btn btn-tab" var='json/data2.json'>data2.json</button> <!--点击切换资源-->

					<button class="btn refresh "><i class="glyphicon glyphicon-refresh"></i></button> <!--点击刷新资源-->

				</div>

			</div>

		</div>

		<script type="text/javascript" src="js/jquery.js"></script>

		<script type="text/javascript" src="jstree/dist/jstree.min.js"></script>

	</body>

</html>


使用了技术有 ： bootstrap、  jstree、 font-awesome 、jquery


这些可以到官网去下：下面会给链接的


<script type="text/javascript">

			function jstree(url){

				//提取成方法

				var $tree = $("#jstree_demo_div").jstree({

					"core": {

						'multiple': false,

						//"check_callback": true, //	允许拖动菜单  唯一 右键菜单

						"data": {

							'url': url,

							'data': function(node) {

								return {

									'id': node.id

								};

							}

						}

					},

					"plugins": [ //插件

						"search", //允许插件搜索

						"sort", //排序插件

						"state", //状态插件

						"types", //类型插件

						"unique", //唯一插件

						"wholerow" //整行插件

						],

					types: {

						"default": { //设置默认的icon 图

							"icon": "glyphicon glyphicon-folder-close",

						}

					}

				});

				$tree.on("open_node.jstree", function(e, data) { //监听打开事件

					var currentNode = data.node;

					data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-open");

				});

				$tree.on("close_node.jstree", function(e, data) { //监听关闭事件

					var currentNode = data.node;

					data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-close"); //data.instance获取当前节点的对象属性

				});

				$tree.on("activate_node.jstree", function(e, data) {

					var currentNode = data.node; //获取当前节点的json .node

					alert(currentNode.a_attr.id)

					alert(currentNode.a_attr.id)

					alert(currentNode.a_attr.href) //获取超链接的  .a_attr.href "链接"  .a_attr.id ID

					alert(currentNode.li_attr.href) //获取属性的  .li_attr.href "链接"  .li_attr.id ID

				});

				//查询 节点名称

				var to = false;

				$('#search_ay').keyup(function() {

					if(to) {

						clearTimeout(to);

					}

					to = setTimeout(function() {

						$tree.jstree(true).search($('#search_ay').val()); //开启插件查询后 使用这个方法可模糊查询节点

					}, 250);

				});

				return $tree;

			}

			$(function() {

				var $tree = jstree('json/data.json');

				$('.btn-tab').click(function(){ //选项事件

					//alert($(this).attr("var"))

					$tree.jstree(true).destroy();	//可做联级

					$tree = jstree($(this).attr("var"));//可做联级

					//alert($(this).attr("var"))

				});

				$('.refresh ').click(function(){ //刷新事件

					$tree.jstree(true). refresh ()

				});

			});

		</script>


需要ajax 动态获取后台属性菜单的json数据请看下面：


把core下的data改成如下。


"data" : function(obj, callback) {

	$.ajax({

		type : "POST",

		url : "/treeviewisjstree/JSTreeServlet",

		dataType : "json",

		async : false,

		success : function(result) {

		console.info(result);

		if (result) {

			callback.call(this, result);

		} else {

			$("#jstree_div").html("暂无数据！");

		}

	}

});

}


json数据的格式：


[

	{

		"id": "ajson1",  //id

		"parent": "#",  // 父节点 #标识这个是根节点

		"text": "Simple root node", //显示的文本

		"a_attr":{

			"href":"链接",

			"id": 1

		},

		 "li_attr": {

			 "href":"属性",

				"id": 2

		 },

			"state" :{ //启动状态

				"opened" : false,

				"disabled" : false,

				"selected" : true

			}

	}, {

		"id": "ajson2",

		"parent": "#",

		"text": "Root node 2"

	}, {

		"id": "ajson3",

		"parent": "ajson1",

		"icon" : "fa fa-file",

		"text": "Child 1"

	}, {

		"id": "ajson4",

		"parent": "ajson2",

		"icon" : "fa fa-file",

		"text": "Child 2"

	}, {

		"id": "ajson6",

		"parent": "ajson4",

		"icon" : "fa fa-file",

		"text": "Child 6"

	}, {

		"id": "ajson5",

		"parent": "ajson4",

		"icon" : "fa fa-file",

		"text": "Child 5"

	}, {

		"id": "ajson7",

		"parent": "ajson4",

		"icon" : "fa fa-file",

		"text": "Child 7"

	}

]


效果图：


												


											
jstree的基本应用----记录的更多相关文章
	

    
								
  1. jsTree使用记录
		
    1. ajax请求生成jsTree <span style="font-size:14px;"><script> var r = []; // 权限树中被选 ...
    
		
    2. 
						
  2. 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用
		
    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...
    
		
    3. 
						
  3. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
		
    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
    
		
    4. 
						
  4. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理
		
    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
    
		
    5. 
						
  5. 基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
		
    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
    
		
    6. 
						
  6. （转）基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用
		
    http://www.cnblogs.com/wuhuacong/p/4759564.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理& ...
    
		
    7. 
						
  7. 树组件——jstree使用
		
    本文记录的只是我自己当时的代码,每行的注释很清楚了,你自己可以做相应变通 一.使用前提: 1.下载jstree依赖包 2.相关页面引入样式["jstree/themes/default/st ...
    
		
    8. 
						
  8. 前端-jstree 一些常用功能
		
    最近使用到了jstree(v3.3.4)这个插件(官网:https://www.jstree.com/),在这里记录下我的使用过程的一些技巧和问题. 1. 获取数据 一般实际项目中用到的数据都是aja ...
    
		
    9. 
						
  9. 记一次debug记录：Uncaught SyntaxError: Unexpected token ILLEGAL
		
    在使用FIS3搭建项目的时候,遇到了一些问题,这里记录下. 这里是发布搭建代码: // 代码发布时 fis.media('qa') .match('*.{js,css,png}', { useHash ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. dumpdecrypted进行砸壳
			
    1.下载源码git clone git://github.com/stefanesser/dumpdecrypted/ 2.进行编译生成 dumpdecrypted.dylibmake 3.将dump ...
    
			
    2. 
						
  2. lamdba匿名函数 sored()函数 filter()函数 map函数() 递归函数
			
    帅爆太阳的男人 1,lamdba匿名函数:为了解决一下简单的需求而设计的一句话函数,语法: 函数名 = lambda 参数: 返回值 def func(n): return n*n print(fun ...
    
			
    3. 
						
  3. 编译android framework的例子【转】
			
    本文转载自:http://blog.csdn.net/brucexu1978/article/details/7610358 在开发过程中,尤其是Framework相关开发时,有时候需要重新编译资源文 ...
    
			
    4. 
						
  4. Kentico中的skin.css的加载
			
    kentico7中有如下的css引用 第一行的css是  SELECT * FROM dbo.CMS_CssStylesheet表中的css 后面2个对应到的是Kentico7\App_Themes\ ...
    
			
    5. 
						
  5. Explicit Interface Implementation (C# Programming Guide)
			
    https://msdn.microsoft.com/en-us/library/ms173157.aspx If a class implements two interfaces that con ...
    
			
    6. 
						
  6. Semaphore and SemaphoreSlim
			
    https://msdn.microsoft.com/en-us/library/z6zx288a(v=vs.110).aspx The System.Threading.Semaphore clas ...
    
			
    7. 
						
  7. python-----复制文件夹
			
    python复制文件夹有两种方法: 1.使用shutil模块:(要保存的路径必须事先不存在) #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time ...
    
			
    8. 
						
  8. pgsql数据库应用两点注意
			
    今天在写一个sql脚本时遇到了两个问题,记录一下. 1,pgsql中没有select top n语句,可以用limit n代替. 2,pgsql可以在定义函数存储过程时使用变量,但要注意函数定义中的函 ...
    
			
    9. 
						
  9. E20180109-E
			
    auxilary  adj. 辅助的; 备用的,补充的; 附加的; 副的;               n. 助动词; 辅助者,辅助人员; 附属机构,附属团体; 辅助设备; 
    
			
    10. 
						
  10. 略微讲讲最近的 webpack 该如何加快编译
			
    首先假设 基础的环境是有 creat-react-app 所创建的 即所有基础的loader,插件的 cache 都已经缓存了 在这种情况下想加速,真是很难 不过,有一个插件是可以观察 各个模块所花的 ...
    
			
    11.