<!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. C#如何让Listbox支持多选
			
    把SelectionMode改成MultiExtended
    
			
    2. 
						
  2. 【每日算法】排序算法总结（复杂度&amp;稳定性）
			
    一.插入排序:稳定,时间复杂度O(n^2) 想象你在打扑克牌,一開始左手是空的,接着右手開始从桌上摸牌,并将其插入到左手的一把牌中的正确位置上.为了找到这个正确位置,我们须要从右到左将它与手中的牌比較 ...
    
			
    3. 
						
  3. ≪统计学习精要(The Elements of Statistical Learning)≫课堂笔记（三）
			
    照例文章第一段跑题,先附上个段子(转载的哦~): I hate CS people. They don't know linear algebra but want to teach projecti ...
    
			
    4. 
						
  4. cc1: error: bad value (armv5) for -march= switch【转】
			
    本文转载自:https://stackoverflow.com/questions/23871924/cc1-error-bad-value-armv5-for-march-switch Ask Qu ...
    
			
    5. 
						
  5. MAMP/xampp安装redis
			
    nmp/amp/xampp安装redis 一.安装redis服务 1.通过homebrew安装redis sudo brew install redis 2.启动redis服务,且接受客户端连接 su ...
    
			
    6. 
						
  6. 逻辑频道号---DVB  NIT  LCN
			
    先介绍NIT,NIT描述如下: 有一点要注意,NIT是对大网的描述,即NIT并不是描述当前的流,而是描述大网的某些或者全部流.如下图,TS流描述1-6共对6个频点不同的TS流进行了描述,具体对哪一个流 ...
    
			
    7. 
						
  7. Ueditor 单独使用上传图片及上传附件方法
			
    1 <script type="text/plain" id="upload_ue"></script> 2 <script ty ...
    
			
    8. 
						
  8. Objective-C 继承与类
			
    创建: 2018/01/20 完成: 2018/01/21 更新: 2018/01/22 标题前增加 [Objective-C]  继承的概念  父类与子类 ●继承: 继承其他类 ●父类: 被继承的类 ...
    
			
    9. 
						
  9. Python基础 — NumPy
			
    NumPy--简介  Numpy(Numerical Python的简称)是一个由多维数组对象和用于处理数组的例程集合组成的库.  Numpy内部解除了Python的PIL(全局解释器锁),运算效率极 ...
    
			
    10. 
						
  10. bzoj 2726: [SDOI2012]任务安排【cdq+斜率优化】
			
    cdq复健.jpg 首先列个n方递推,设sf是f的前缀和,st是t的前缀和: \[ f[i]=min(f[j]+s*(sf[n]-sf[j])+st[i]*(sf[i]-sf[j])) \] 然后移项 ...
    
			
    11.