<!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. Office 针式打印机如何插入色带
			
    1 打开盖子,用手按住我按的地方   2 向下翻起   3 翻转完成   4 装入色带(有旋钮的那面朝向自己,装入之后,按箭头方向旋转以拉紧色带,下图圈出来的2是色带导向架)   5 把色带绷直,如下 ...
    
			
    2. 
						
  2. CentOS+Apache+php无法访问redis的解决方法  Redis server went away
			
    在CentOS下配置Apache+php+redis+phpredis环境.编辑访问redis缓存的php程序test.php,以应用程序方式在后台运行,可成功访问Redis,而在Apache下以网页 ...
    
			
    3. 
						
  3. Rust hello world 语法解说
			
    Rust的hello world代码例如以下: fn main() { println!("Hello, world!"); } 1.fn main() fn main(){    ...
    
			
    4. 
						
  4. kentico7中设置site的default page
			
    在SiteManager中,Settings中,选择好站点,然后Content,Default alias path
    
			
    5. 
						
  5. 【IOI2013】【Bzoj3246】Dreaming
			
    http://www.lydsy.com/JudgeOnline/problem.php?id=3246 中文题面 天地之初,世界尚在遥远的梦想之中. Serpent(水蛇)生活的地方有N个水坑,编号 ...
    
			
    6. 
						
  6. MAMP/xampp安装redis
			
    nmp/amp/xampp安装redis 一.安装redis服务 1.通过homebrew安装redis sudo brew install redis 2.启动redis服务,且接受客户端连接 su ...
    
			
    7. 
						
  7. bzoj1036 [ZJOI2008]树的统计Count——LCT
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1036 LCT水题! 然而没有1A(咬牙)! 注意值有负数,所以取 max 的话要把作为“哨兵 ...
    
			
    8. 
						
  8. 深入理解JMM（Java内存模型） --（四）volatile
			
    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这 ...
    
			
    9. 
						
  9. gitlab调试
			
    Bundle complete! 104 Gemfile dependencies, 161 gems now installed.Gems in the groups development, te ...
    
			
    10. 
						
  10. 17.EXTJs 中icon 与iconCls的区别及用法！
			
    转自:https://blog.csdn.net/u013890437/article/details/38315717?utm_source=blogxgwz7
    
			
    11.