jsTree学习(二)——简单demo

最新推荐文章于 2021-06-11 12:57:59 发布

Yel_Liu

最新推荐文章于 2021-06-11 12:57:59 发布

阅读量1.5k

点赞数 1

分类专栏： jsTree 文章标签： jstree demo

本文链接：https://blog.csdn.net/Yel_Liu/article/details/55509400

版权

jsTree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这两天一直在看jsTree，对它还没有一个整体的把握，所以就先用已掌握的做几个简单的demo,下面是完整代码并配以部分解释，可以贴出去直接打开看效果

demo1

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>jstree</title>   
    <link rel="stylesheet" href="themes/default/style.min.css" />  
</head>  
<body>  
    <button id="demo_btn">点击</button>  
    <div id="demo"></div>  
<script src="jquery-1.11.0.min.js"></script> 
<script src="jstree.min.js"></script>  
<script>  
        $('#demo_btn').on('click',function(){  
            var instance = $('#demo').jstree(true);    //jsTree树实例
            instance.deselect_all();                   //取消所有选择的节点
	 });  
        $('#demo').on("init.jstree",function(){  
            //所有事件绑定后触发该事件
        }).on("load_node.jstree",function(e,data){  
            //一个节点加载完成后触发该事件
        }).on("changed.jstree",function(e,data){  
            //当选项改变是触发该事件 
            //console.log(data);  
            if(data.selected.length){         //已选中个数
                alert('弹出'+data.instance.get_node(data.selected[0]).text);   //获取第一个选中节点的文本内容
            }  
            console.log(data.instance.is_parent(data.selected[0]));      //判断选中节点是否含有子节点
            console.log(data.instance.is_leaf(data.selected[0]));        //判断选中节点是否不含有子节点
            console.log(data.instance.get_theme());                      //获取当前的主题
        }).jstree({  
            "core":{  
                "themes":{"dots":false},                                 //主题：去掉点状连接线
                "multiple":false,                                        //不可多选
                "data":[  
                    {  
                        "text":"根目录",  
                        "children":[  
                            {"text":"根目录1","id":1},  
                            {"text":"根目录2"}  
                        ]  
                    }  
                ]  
            }  
        });  
</script>  
</body>  
</html>

demo2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree</title>
	<link rel="stylesheet" href="themes/default/style.min.css" />
</head>
<body>
        <div class="ibox-content">
		<div id="using_json"></div>
	</div>
	<input type="button" value="打开选择的id" onclick="openId();">
	<script>

		function openId(){
			//获取选中节点id组成的数组
			var nodes=$("#using_json").jstree("get_checked");
			console.log(nodes);
		}
		$(function(){
			$("#using_json").jstree({
				"core": {
					"data": ["Empty Folder", {
						"id":1,
						"text": "Resources",
						"state": {
							"opened": true
						},
						"children": [{
							"id":2,
							"text": "css",
							"children": [{
								"id":3,
								"text": "animate.css",
								"icon": "none"
								},
								{
									"id":4,
									"text": "bootstrap.css",
									"icon": "none"
								},
								{
									"id":5,
									"text": "main.css",
									"icon": "none"
								},
								{
									"id":6,
									"text": "style.css",
									"icon": "none"
								}],
							"state": {
								"opened": true
							}
						},
							{
								"id":20,
								"text": "js",
								"children": [{
									"id":7,
									"text": "bootstrap.js",
									"icon": "none"
								},
									{
										"id":8,
										"text": "hplus.min.js",
										"icon": "none"
									},
									{
										"id":9,
										"text": "jquery.min.js",
										"icon": "none",
										"state":{
											"selected":true
										}
									},
									{
										"id":10,
										"text": "jsTree.min.js",
										"icon": "none"
									},
									{
										"id":11,
										"text": "custom.min.js",
										"icon": "none"
									}],
								"state": {
									"opened": true
								}
							}]
					},
					"Fonts", "Images", "Scripts", "Templates" ]
				},
				"checkbox" : {
					"keep_selected_style" : false
				},
				"plugins" : [ "wholerow", "checkbox" ]   //使用wholerow(每个节点占据一整行)、checkbox(每个节点前加checkbox)两个插件
			})
		});
	</script>
</body>
</html>

demo3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree</title>
	<link rel="stylesheet" href="themes/default/style.min.css" />
</head>
<body>
        <input type="text" id="txtIndustryArea">
	<input type="text" id="txtIndustryAreaID">
	<div id="treeArea" style="overflow: auto; width: 268px; height: 350px;   
     border: solid 0px #b9cee9; display: none; position: absolute; "></div> 
	<script type="text/javascript">   
		$(function () {   
			$("#txtIndustryArea").keyup(function () {    
				var v = $("#txtIndustryArea").val(); 
				$("#treeArea").jstree(true).search(v); 
			});   

			$('#treeArea').jstree({   
				'plugins': ["checkbox", "sort", "types", "wholerow", "search", "unique"],   
				'core': {   
					'multiple': false,   
					'data': {   
						"url": "demo.json",   
						"data": function (node) { return { "id": node.id }; }   
					}   
				}   
			}).bind("select_node.jstree", function (e, data) {     //选中节点时触发
				$("#txtIndustryArea").val(data.node.text);     //节点文本内容  
				$("#txtIndustryAreaID").val(data.node.id);     //节点id  
			});   


			$("#treeArea").on('hover_node.jstree', function (e,data) {   
				console.log(data.node);          //打印出鼠标悬停节点对象
			});  

		});   

	</script>     
</body>
</html>

demo.json文件已在jsTree学习(一)——基础中贴出本

Yel_Liu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jsTree学习(二)——简单demo

这两天一直在看jsTree，对它还没有一个整体的把握，所以就先用已掌握的做几个简单的demo,下面是完整代码并配以部分解释，可以贴出去直接打开看效果 demo1&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
复制链接

扫一扫