<!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. Redis学习笔记3-Redis5个可运行程序命令的使用
			
    在redis安装文章中,说到安装好redis后,在/usr/local/bin下有5个关于redis的可运行程序.以下关于这5个可运行程序命令的具体说明. redis-server Redisserv ...
    
			
    2. 
						
  2. easyui中点击datagrid的分页刷新按钮，数据无法更新到最新状态
			
    原因分析:点击刷新按钮是对当前页数据进行reload,因此所传的请求参数皆为上一次加载当前页的参数即datagrid的load方法中的参数,主要是因为请求的最终时间无法更新到最新状态 解决方案:对点击 ...
    
			
    3. 
						
  3. Unity3D研究之多语言用中文做KEY
			
     做多语言的时候用中文做KEY绝对是有100%的优点,假设用英文表示那么代码里面给文字赋值的地方全都是英文.写的代码多了以后维护起来就没有人能看懂了,或者看起来非常费劲. 对PoolManager ...
    
			
    4. 
						
  4. 内容原发网站seo不重视2个标签，导致seo效果不如转发网站
			
    采集数据,挖掘观点,小心求证,得出结论 时间经过 今日凌晨,爬虫热点采集,其中第一财经是目标站之一,采集到了 http://www.yicai.com/news/5391233.html 谷歌去年悄然 ...
    
			
    5. 
						
  5. xubuntu 17.04 和 iphone 6互传文件方法——使用libimobiledevice就可以像u盘一样操作文件了
			
    I need to preface this by saying I'm also new to Linux, but I've got it working I think. The instruc ...
    
			
    6. 
						
  6. Python不兼容问题
			
    今天遇到了一个Python2与3不兼容的坑. ride是基于robot框架的python自动化ui,但它只支持python2,而我电脑环境只有python3,想跑别人基于ride编写的测试用例,折腾了 ...
    
			
    7. 
						
  7. POJ1673 ZOJ1776 三角形四心模板
			
    POJ1673 题中所述点即为三角形的垂心,用向量法可以轻松证明. 垂心 重心 外心 均位于三角形的欧拉线上,且三者有线性关系,于是,求出重心和外心即可求得垂心. 重心就是三点的平均值,外心可以通过解 ...
    
			
    8. 
						
  8. 深入理解JMM（Java内存模型） --（七）总结
			
    JMM 掌管着一个线程对内存的动作 (读和写)影响其他线程对内存的动作的方式.由于使用处理器寄存器和预处理 cache 来提高内存访问速度带来的性能提升,Java 语言规范(JLS)允许一些内存操作并 ...
    
			
    9. 
						
  9. HTML5中File
			
    一 File对象与FileList对象 当将input元素的type类型设置为file时,web页面上会显示一个选择文本按钮和一个文本显示框,单击文件按钮可以选择一个文件,文本显示框中会显示选中的文件 ...
    
			
    10. 
						
  10. C++中正确使用PRId64 （转载）
			
    转自:http://blog.csdn.net/win_lin/article/details/7912693 例子参考高性能流媒体服务器SRS:https://github.com/winlinvi ...
    
			
    11.