JsTree

 <!--树-->
引入的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>  
    

$(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);  
  }); 
    

});