您的位置：首页 > Web前端 > JavaScript

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

2017-05-03 11:34 274 查看 
<!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中文网： 点击打开链接
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

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

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航