jstree的基本应用----记录

最新推荐文章于 2024-09-05 10:02:59 发布

qq_34050009

最新推荐文章于 2024-09-05 10:02:59 发布

阅读量3.5k

点赞数 3

文章标签： jstree 总结记录树形菜单

本文链接：https://blog.csdn.net/qq_34050009/article/details/71108605

版权

<!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中文Api :点击打开链接
bootstrap官网：点击打开链接
 font-awesome中文网： 点击打开链接