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

来源：互联网发布：精美的php个人网站源码编辑：程序博客网时间：2024/05/18 01:17
<!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 .nodealert(currentNode.a_attr.id) alert(currentNode.a_attr.id) alert(currentNode.a_attr.href) //获取超链接的  .a_attr.href "链接"  .a_attr.id IDalert(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"}]
效果图：
阅读全文
0 0