JsTree

一、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);
  }); 
 
});

三：换肤功能