<!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改成如下。
json数据的格式:"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("暂无数据!"); } } }); }
效果图:[ { "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的基本应用----记录
最新推荐文章于 2024-03-19 13:02:21 发布