<!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"
}
]
效果图：
