JsTree

Posted 2020-08-22

一、JStree的简单介绍
1.关于jstree
jsTree 使用了 jQuery 和 Sarissa，是一个是免费的但是设置灵活的，基于 javascript 跨浏览器支持的网页树形部件。

jsTree 支持三种数据源头：
预先定义好的 html -嵌套的列表结构
JSON
XML

jsTree 的主要功能有：

同步导入 – 只需要提供一个 URL，就会去请求数据（只适合 JSON 和 XML 数据形式）。
支持打开，关闭，重命名，创建，删除节点（通过预先定义好的规则）
支持多种回调函数（onchange, oncreate, ondelete, onload, 等等）
支持拖拉
支持多重选择
支持多种语言
支持主题（可以修改图标，大小和背景等等）
可以支持动态打开和关闭(configurable)
可选的快捷键导航
支持多个树形部件
另外还可以做为 jQuery 插件。
官方主页：http://www.jstree.com/
jstree在goolge code上的托管项目：
http://code.google.com/p/jstree/

 

二、JStree的简单用法

代码部分

HTML:

 <!--树-->
引入的css:
<link rel="stylesheet" type="text/css" href="/pcs9000/lib/common-css/css/style.min.css" />

<div class="reason_list">  
    <div id="treeview1" class="treeview">  
                      
    </div>  
</div>  
    

JS:

需要引入的js有

<script src="/pcs9000/lib/jquery/jquery.js"></script>
<script src="/pcs9000/lib/common-css/js/jstree.min.js"></script>
<script src="/pcs9000/gzdsy/monitor/resources/js/treepanel.js"></script>

 treepanel.js：

$(function () {
var treeDate; //存放数据
$.ajax({
    type:"get",
    url:"resources/js/getJson.json",
    dataType:"json",
    success:function(data){
        treeDate = data.data.treeData[0];
        $("#treeview1").jstree({      //创建树开始
            ‘core‘ : {  
                "multiple" : false,  
                ‘data‘: treeDate,  
                ‘dblclick_toggle‘: false          //禁用tree的双击展开  
            },  
            "plugins" : ["search"]   
       });  
    }
});


//tree change时事件  
$(‘#treeview1‘).on("changed.jstree", function (e, item) {  
    $(this).find(".jstree-leaf .jstree-anchor").unbind("click").on("click",function(){
        nodeId = item.node.id;
        $("#AjaxLoading").remove();
        $.ajax({
            type:"get",
            url:"resources/js/getJson.json",
            dataType:"json",
            beforeSend: function(XMLHttpRequest){
                   ShowLoading();
            },
            success:function(data){
            },
            complete: function(XMLHttpRequest, textStatus) {
                $("#AjaxLoading").remove(); 
            },
            error:function(){
                alert("加载数据失败！");
            }
            
        });
    });
   

});  
//加载动画
function ShowLoading(){
    $(".rightIntent").append(‘<div id="AjaxLoading" class="showbox">‘+
                        ‘<div class="loadingWord">‘+
                        ‘<img src="resources/img/waiting.gif">加载中，请稍候...</div></div>‘);
}


//jstree单击事件  
$("#treeview1").bind("select_node.jstree", function (e, data) {  
    if(data.node.id !=1 ){                           //排除第一个节点
        data.instance.toggle_node(data.node);        //单击展开下面的节点  
    }  
      
});   
//输入框输入定时自动搜索  
var to = false;  
$(‘#search_ay‘).keyup(function () {  
    if(to) {  
      clearTimeout(to);   
    }  
    to = setTimeout(function () {  
        $(‘#treeview1‘).jstree(true).search($(‘#search_ay‘).val());  
        }, 250);  
  }); 
    

});

 三：换肤功能