<!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. RHEL6.5上Oracle ACFS与Linux samba一起使用时遇到的bug
			
    RHEL上的Oracle ACFS与linux samba一起使用时遇到的bug 一.环境介绍: cat /etc/issue的结果为: Red Hat Enterprise Linux Server ...
    
			
    2. 
						
  2. Vue.js 组件的三个 API：prop、event、slot
			
    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
    
			
    3. 
						
  3. IE7下兼容问题总结
			
    1.<LI> border-bottom 不显示 解决办法 加个height:100%; 2.border:none;不好使,要用 border:0;
    
			
    4. 
						
  4. 2016/2/22  1、Window.document对象
			
    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...
    
			
    5. 
						
  5. Codeforces Round #240 (Div. 1) B. Mashmokh and ACM DP
			
                                                 B. Mashmokh and ACM                                     ...
    
			
    6. 
						
  6. POJ 2629:Common permutation
			
    Common permutation Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5510   Accepted: 168 ...
    
			
    7. 
						
  7. POJ 3650:The Seven Percent Solution
			
    The Seven Percent Solution Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7684   Accep ...
    
			
    8. 
						
  8. poj 3621(最优比率环）
			
    Sightseeing Cows Farmer John has decided to reward his cows for their hard work by taking them on a  ...
    
			
    9. 
						
  9. Objective-C程序
			
    创建: 2018/01/17 完成: 2018/01/19  对象(object)与信息  信息式 声明实例变量  id obj;  向对象变量发送信息 [obj msg] //这就是信息式 例: [ ...
    
			
    10. 
						
  10. Python基础 — OS
			
    OS模块 -- 简介   OS模块是Python标准库中的一个用于访问操作系统功能的模块,OS模块提供了一种可移植的方法使用操作系统的功能.使用OS模块中提供的接口,可以实现跨平台访问.但是在OS模块 ...
    
			
    11.